jQuery addClass / removeClass过渡不流畅但结结巴巴

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

使用stop的效果

$(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（function（index，currentClass））

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

UPDATE

我在错误的位置放置了一些代码，并且错过了额外的停止参数。 请检查上面的代码和新的jsfiddle 。