Question

我有这个简单的代码：

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

如何合并淡入淡出效果，因此添加/删除类更加渐进？

我需要animate（）吗？

由于

Answer 1

如果您还使用jQuery UI，它会改进CSS添加/删除方法，以便它们接受第二个参数，该参数是设置CSS转换动画的延迟（以毫秒为单位）。为变化设置动画超过半秒，例如：

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

<强>更新

为了防止动画队列在快速悬停/输出序列中被卡住或不一致，您还可以在启动add / removeClass之前强制停止现有动画：

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

Answer 2

继@Dave Ward的回答之后，还有一个 standalone plugin ，如果您不想使用 jQuery UI ，可以这样做。

Answer 3

除了 @Dave Ward 的答案之外，我还必须删除removeClass（）的stop(true)部分，否则在第一次鼠标悬停/鼠标移除后鼠标悬停部分停止工作：

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

Answer 4

另一种非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 Transitions的更多信息：

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

将Fade合并到addClass jQuery中

4 个答案: