将 Fade 合并到 addClass jQuery 中

发布于 2024-11-02 02:58:27 字数 241 浏览 5 评论 0原文

我有这个简单的代码：

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

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

我需要 animate() 吗？

谢谢

原文

I have this simple code:

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

How can i incorporate a fade effect, so the add/remove class is a little more gradual?

Would i require animate()?

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘿哥们儿 2024-11-09 02:58:27

如果您还使用 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) }
)

If you're also using jQuery UI, it improves the CSS add/remove methods so that they accept a second parameter that's a delay (in milliseconds) to animate the CSS change over. To animate the change over a half-second, for example:

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

Update:

To prevent the animation queue from getting jammed up or inconsistent during quick hover in/out sequences, you can also force existing animations to stop before starting the add/removeClass:

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

回复收藏 0 原文

颜 2024-11-09 02:58:27

除了@Dave Ward的回答之外，还有一个独立插件 如果您不想使用jQuery UI，它会执行此操作。

回复收藏 0 原文

别低头，皇冠会掉 2024-11-09 02:58:27

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

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

In addition to @Dave Ward's answer, I had to remove the stop(true) part for the removeClass(), otherwise after the first mouseover/mouseout the mouseover part stops working:

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

回复收藏 0 原文

紫轩蝶泪 2024-11-09 02:58:27

另一种非 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

Another, non-javascript, alternative to this would be to change: .featureItems li in your CSS to have the following properties:

.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;
}

Which would then let CSS3 navigate between whatever changes you make in .hover, for example:

.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);
}

You can find more info about CSS3 Transitions here:

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

回复收藏 0 原文

~没有更多了~