1

在图片库中，我尝试使所有图片不悬停灰度：

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

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

});

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

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

});

但是，如果您在第一个动画完成之前将鼠标移动到另一个项目，这并不顺利……您如何以更好的方式实现这一点？

4

2 回答 2

1

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

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

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

只有当鼠标从元素外变为元素内时，该mouseenter事件才会触发。反之亦然。 mouseleave

这样，您就不会看到口吃行为，mouseover因为每次鼠标移动并且您在元素上方时，都会触发该事件。

于 2012-08-30T17:11:32.553 回答
0

使用停止的效果

$(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））

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

更新

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

于 2012-08-30T13:44:34.093 回答