javascript - "fadeTo"当我滚动图像太快时似乎有一个错误

Question

我正在慢慢学习如何从头开始修改和编写 jQuery，并一直在尝试修改一些预先编写的代码，这只是简单地使图像不透明度:1 和同一 HTML 元素中的所有其他图像不透明度:0.2。

当我使用 fadeTo 并快速在图像上移动时，它会停止执行动画并挂起一段时间，直到它自行修复。任何人都可以对这种情况提出建议。

抱歉，有点浮夸:)

这是代码:

$(window).load(function(){
var spotlight = {
     // the opacity of the "transparent" images - change it if you like
    opacity : 0.2,

    /*the vars bellow are for width and height of the images so we can make
    the <li> same size */
    imgWidth : $('#portfolio ul li').find('img').width(),
    imgHeight : $('#portfolio ul li').find('img').height()

};

//set the width and height of the list items same as the images
$('#portfolio ul li').css({ 'width' : spotlight.imgWidth, 'height' : spotlight.imgHeight });

//when mouse over the list item...
$('#portfolio ul li').hover(function(){

    //...find the image inside of it and add active class to it and change opacity to 1 (no transparency)
    $(this).find('img').addClass('active').fadeTo('fast', 1);

    //get the other list items and change the opacity of the images inside it to the one we have set in the spotlight array
    $(this).siblings('li').find('img').fadeTo('fast', 0.2);

    //when mouse leave...
}, function(){

    //... find the image inside of the list item we just left and remove the active class
    $(this).find('img').removeClass('active');

});

//when mouse leaves the unordered list...
$('#portfolio ul').bind('mouseleave',function(){
    //find the images and change the opacity to 1 (fully visible)
    $(this).find('img').fadeTo('fast', 1);
});

});

Answer 1

使用hoverIntent插入。它允许您设置一个小的可配置延迟，之后触发悬停，而不仅仅是当您将鼠标非常快地移动到元素上时。