Question

在图片库中，我尝试让所有图片都不会灰度化：

$('.featured_product_item').mouseover(function() {

    $('.featured_product_item').not(this).addClass('greyscale',200);

});

$('.featured_product_item').mouseout(function() {

    $('.featured_product_item').removeClass('greyscale',200);

});

但是，如果你在第一个动画完成之前将鼠标移动到另一个项目，那就不顺利......你怎么能以更好的方式实现呢？

Answer 1

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

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

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

mouseenter事件只会在鼠标从元素的外部变为内部元素时触发。 mouseleave的情况恰恰相反。

这样你就不会看到mouseover所见的口吃行为，因为每当鼠标移动并且超过元素时，事件就会触发。

Answer 2

使用停止

的效果

$(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);
    });

});

请查看stop

的jQuery手册

这是

的JSFiddle

注意

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

.addClass（function（index，currentClass））

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

<强>更新

我在错误的地方有一些代码而错过了停止的额外参数。请检查上面的代码和新的jsfiddle。

jQuery addClass / removeClass过渡不顺畅但是口吃

2 个答案: