将淡入效果加入addClass jQuery函数

Question

I have this simple code:

$('.featureItems li').hover(
       function(){ $(this).addClass('hover') },
       function(){ $(this).removeClass('hover') }
)

如何添加淡入淡出效果，让添加/删除类的过程更加平滑？

我需要使用animate()吗？

谢谢

- benhowdle89

---

“所以添加/删除类会更加缓慢”你的意思是要延迟添加类吗？ - errorhandler

你考虑过使用CSS3过渡效果吗？ - Randall Hunt

Answer 1

如果您也在使用jQuery UI，它可以改进CSS的添加/删除方法，使其接受第二个参数作为延迟时间（毫秒）以动画方式更改CSS。例如，要在半秒钟内动画更改，请使用以下代码：

$('.featureItems li').hover(
   function(){ $(this).addClass('hover', 500) },
   function(){ $(this).removeClass('hover', 500) }
)

更新：

为了防止在快速的鼠标悬停进出过程中动画队列被堵塞或不一致，您还可以在开始添加/删除类之前强制停止现有的动画：

$('.featureItems li').hover(
   function(){ $(this).stop(true).addClass('hover', 500) },
   function(){ $(this).stop(true).removeClass('hover', 500) }
)

- Dave Ward

---

我会接受这个建议，但是我尝试实现它时，当移动多个元素时，removeClass有时不起作用，导致悬停类保留在上面！ - benhowdle89

@benhowdle89：我以前也遇到过这个问题。通常，在应用新动画之前中止任何正在执行的动画就可以解决这个问题。请参见我的答案更新中的示例。 - Dave Ward

这根本不起作用。因为addClass和removeClass两个函数都没有duration作为参数！！！ - Matilda Yi Pan

@MatildaYiPan：这意味着你正在使用jQuery UI，它会添加此可选参数以添加/删除类。 - Dave Ward

Answer 2

除了@Dave Ward的回答之外，我还必须删除removeClass()中的stop(true)部分，否则在第一次mouseover/mouseout之后，mouseover部分将停止工作：

$('.featureItems li').hover(
   function(){ $(this).stop(true).addClass('hover', 500) },
   function(){ $(this).removeClass('hover', 500) }
)

- Stan

Answer 3

另外一个非JavaScript的替代方案是在你的CSS中修改.featureItems li的属性为以下内容：

.featureItems li {
    transition: transform 1s, background-color 1s;
    -moz-transition: -moz-transform 1s, background-color 1s;
    -webkit-transition: -webkit-transform 1s, background-color 1s;
    -o-transition: -o-transform 1s, background-color 1s;
}

这将使CSS3能够在您对.hover所做的任何更改之间进行导航，例如：

.hover {
    background-color: #DDD;
    transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -webkit-transform:scale(1.1,1.1);
    -o-transform:scale(1.1,1.1);
}

你可以在这里找到更多关于CSS3过渡的信息：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

- Randall Hunt

---

我认为这是最好的答案，要记住演示应该尽可能地存在于CSS中。淡入淡出元素属于演示。 - Ben Keating

Answer 4

针对@Dave Ward的回答，如果您不想使用jQuery UI，可以使用独立插件standalone plugin来完成此操作。

- Marko