jQuery淡入CSS类

Question

我想对具有“button”类的特定对象执行简单的fadeIn（）CSS类。 我想在悬停时淡入“hoverbutton”类，然后在鼠标离开该项时淡出。

我在问题中找到了这个解决方案。 它看起来很好，直到我注意到当我快速悬停多个按钮时，有些按钮会卡在“hoverbutton”类上。 不知道如何修复。 有任何建议都将是非常好的。

$('.button').hover(function(){
    $(this).addClass('hoverbutton', 200);
}, function(){
    $(this).removeClass('hoverbutton', 200);
});

当我在一个具有特定类名的元素上悬停时，如果在第一个元素淡出之前快速跳转到另一个具有相同类名的元素，它们似乎会卡住。

使用stop()方法产生了相同的结果。悬停类仍然会卡住。

$('.button').hover(function(){
  $(this).stop().addClass('hoverbutton', 200);
}, function(){
  $(this).stop().removeClass('hoverbutton', 200);
});

- David

---

我认为在 removeClass 和 addClass 中使用 , 200 不是一个有效的参数。 - kei

@kei - jQueryUI为addClass和removeClass添加了时间长度：http://jqueryui.com/demos/addClass/ - Andrew

Answer 1

问题出在jQueryUI使用style属性进行动画，如果它没有完成（因为hover-out在hover-in之前发生），则它正在进行动画的类实际上没有被添加，所以不能通过hover-out来删除。

为了解决这个问题，我们需要在hover-out时执行两件事：

- 停止addClass()动画 - 删除addClass()动画创建的任何临时样式

就像这样...

$('.button').hover(function() {
    $(this)
        .addClass('hoverbutton', 200);
}, function() {
    $(this).stop()
        .attr("style", "")
        .removeClass('hoverbutton', 200);
});

这是一个例子：http://jsfiddle.net/RBTT8/。这个链接可以帮助您了解更多关于it技术的内容。

- Andrew

Answer 2

尝试停止动画队列：

$('.button').hover(function(){
    $(this).stop().addClass('hoverbutton', 200);
}, function(){
    $(this).stop().removeClass('hoverbutton', 200);
});

- AlienWebguy

Answer 3

请查看stop()的文档。您可以像这样将其添加到您的调用中：

$('.button').hover(function(){
  $(this).stop().addClass('hoverbutton', 200);
}, function(){
  $(this).stop().removeClass('hoverbutton', 200);
});

- Hooray Im Helping

Answer 4

尝试使用CSS添加--

    ex)--styles take 0.5s to appear        transition: all 0.5s ease-in-out;

淡入元素所需的代码：

w3schools 过渡链接： http://www.w3schools.com/css/css3_transitions.asp

- sQuijeW

Answer 5

实现相同效果的另一种方法是使用CSS3 Transitions，它在几乎所有浏览器中都得到支持，只有Internet Explorer（版本10及以下）不支持。

以下是一个示例：http://jsfiddle.net/3yr8G/

- Andrew