jQuery 淡入 CSS 类答案

【问题标题】：jQuery fadeIn CSS classjQuery 淡入 CSS 类
【发布时间】：2011-10-01 15:32:30
【问题描述】：

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

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

【问题讨论】：

我不认为, 200 是removeClass 和addClass 的有效参数
@kei - jQueryUI 将持续时间添加到 addClass 和 removeClass: jqueryui.com/demos/addClass

标签： jquery css jquery-ui fadein

【解决方案1】：

尝试停止动画队列：

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

【讨论】：

【解决方案2】：

查看stop() 的文档。您可以像这样将其添加到您的通话中：

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

【讨论】：

【解决方案3】：

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

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

停止addClass() 动画
删除由addClass() 动画创建的任何临时样式

像这样..

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

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

【讨论】：

【解决方案4】：

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

这是一个例子：http://jsfiddle.net/3yr8G/

【讨论】：

【解决方案5】：

尝试使用 CSS 添加 --

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

到你需要淡入的元素

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

【讨论】：