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

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/