Javascript &引用;“法德托”;当我快速浏览图片时,似乎有一个bug

Javascript &引用;“法德托”;当我快速浏览图片时,似乎有一个bug,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在慢慢地从零开始学习如何修改和编写jQuery,并一直在尝试修改一些预先编写的代码,这只会使图像不透明度为1,并使同一HTML元素中的所有其他图像不透明度为0.2 当我使用fadeTo并在图像间快速移动时,它将停止制作动画并挂起一段时间,直到它自行修复。有人能就这种情况提出建议吗 抱歉有点吹牛:) 代码如下: $(window).load(function(){ var spotlight = { // the opacity of the "transparent" images

我正在慢慢地从零开始学习如何修改和编写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);
});
$(窗口).load(函数(){
var聚光灯={
//“透明”图像的不透明度-如果愿意,请更改它
不透明度:0.2,
/*下面的变量用于图像的宽度和高度,因此我们可以
同样大小的
  • */ imgWidth:$('#公文包ul li').find('img').width(), imgHeight:$('ulli')。查找('img')。高度() }; //将列表项的宽度和高度设置为与图像相同 $(“#公文包ul li”).css({“宽度”:spotlight.imgWidth,“高度”:spotlight.imgHeight}); //当鼠标悬停在列表项上时。。。 $('#公文包ul li')。悬停(函数(){ //…找到其中的图像并向其添加活动类,然后将“不透明度”更改为1(无透明度) $(this).find('img').addClass('active').fadeTo('fast',1); //获取其他列表项,并将其中图像的不透明度更改为我们在聚光灯阵列中设置的不透明度 $(this).兄弟姐妹('li').find('img').fadeTo('fast',0.2); //当老鼠离开。。。 },函数(){ //…在我们刚刚离开的列表项中找到图像并删除活动类 $(this.find('img').removeClass('active'); }); //当鼠标离开无序列表时。。。 $('#公文包ul').bind('mouseleave',function(){ //找到图像并将不透明度更改为1(完全可见) $(this.find('img').fadeTo('fast',1); });
  • }))

    使用插件。它允许您设置一个小的可配置延迟,然后触发悬停,而不仅仅是当您将鼠标快速移动到元素上时。

    使用该插件。它允许您设置一个小的可配置延迟,然后触发悬停,而不仅仅是在元素上快速移动鼠标