jQuery fadeIn CSS 类

Question

我正在尝试对某些具有“button”类的对象执行简单的 fadeIn() CSS 类。我想在悬停时淡入“hoverbutton”类，然后在鼠标离开该项目时淡出。

我在问题中发现了这一点。它似乎工作得很好，直到我注意到当我将鼠标悬停在多个按钮上时，有些按钮很快就会卡在“悬停按钮”类上。不知道如何解决这个问题。任何建议都会很棒。

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

当我将鼠标悬停在一个项目上并在第一个项目的淡入淡出完成之前快速跳转到该类的另一个项目时，它们似乎被卡住了。

stop()ing 产生相同的结果。悬停类仍然卡住

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

Answer 1

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

要解决此问题，我们需要在悬停时执行两件事：

• 停止 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 过渡，一切都支持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