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); });

Answer 1

问题是因为jQueryUI正在使用style属性来执行动画，如果它没有完成（因为悬停在hover-in结束之前发生），它所动画的类不是实际上已添加，因此无法通过悬停删除。

要解决这个问题，我们需要在悬停时做两件事：

停止addClass()动画
删除addClass()动画

喜欢这样..

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

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

Answer 2

尝试停止动画队列：

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

Answer 3

查看stop()的文档。您可以将其添加到您的通话中，如下所示：

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

Answer 4

实现相同效果的另一种方法是使用CSS3 Transitions，除了Internet Explorer （最高版本10）之外的所有 都支持。

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

Answer 5

尝试使用CSS add -

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

到需要淡入的元素

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

jQuery fadeIn CSS类

5 个答案: