jQuery addClass/removeClass转换不是平滑的，而是断断续续的

jQuery addClass/removeClass transition not smooth but stuttering

本文关键字：平滑 断断续续 addClass removeClass 转换 jQuery      更新时间：2023-09-26

在图片库中，我试图使所有图片都不在灰度范围内徘徊：

$('.featured_product_item').mouseover(function() {
    $('.featured_product_item').not(this).addClass('greyscale',200);
});
$('.featured_product_item').mouseout(function() {
    $('.featured_product_item').removeClass('greyscale',200);
});

但是，如果在第一个动画完成之前将鼠标移动到另一个项目，则这是不平滑的。。。你怎么能以更好的方式做到这一点？

您应该尝试.mouseenter()和.mouseleave()。

http://api.jquery.com/mouseenter/

http://api.jquery.com/mouseleave/

只有当鼠标从元素外部的更改为元素内部的时，mouseenter事件才会触发。mouseleave的情况正好相反。

通过这种方式，您不应该看到mouseover中的口吃行为，因为每次鼠标移动并且您在元素上时，事件都会触发。

使用停止的效果

$(document).ready(function() {
  
    $(".featured_product_item").mouseover(function () {
        $('.featured_product_item').not(this).stop(true,true).addClass("selected", 1000);
    });
  
    $(".featured_product_item").mouseout(function () {
        $('.featured_product_item').stop(true,true).removeClass("selected",1000);
    });
  
});​

请查看jQuery手册以停止

这是这个的JSFiddle

注意

我不确定您是否正确使用了addClass和removeClass。在使用动画时间作为第二个参数的手册中，我没有找到任何参考。来自手册：

.addClass（函数（索引，currentClass））

函数（index，currentClass）返回一个或多个用空格分隔的类名以添加到现有类名中的函数。接收集合中元素的索引位置和现有类名作为参数。在函数中，这是指集合中的当前元素。

更新

我把一些代码放错了地方，错过了停止的额外参数。请检查上面的代码和新的jsfiddle。

相关文章：