javascript - 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 所出现的卡顿行为，因为每次鼠标移动并且您位于元素上时，该事件都会触发。