jQuery 淡入 CSS 类

Question

我正在尝试对某些具有“按钮”类的对象执行简单的 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/