jQuery fadeIn CSS类

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

我在问题中发现了这一点。直到我注意到当我快速将鼠标悬停在多个按钮上时，似乎有些 Action 卡在了“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);
});

最佳答案

问题是因为jQueryUI使用style属性进行动画处理，并且如果动画未完成(因为悬停发生在悬停完成之前)，则实际上并未添加要设置动画的类，因此可以做到这一点。不能被悬停移除。

要解决此问题，我们需要在悬停上做两件事:

停止addClass()动画

删除由addClass()动画

创建的任何临时样式

像这样

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

这是一个示例:http://jsfiddle.net/RBTT8/

关于jQuery fadeIn CSS类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6631126/