如何添加淡入淡出效果这个jQuery图片交换库

我想知道我怎么能徘徊在使用这个例子http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm 如何添加淡入淡出效果这个jQuery图片交换库

我在想，如果能够实现这样的www.bungie添加淡入效果。净

下面是在例如

$(document).ready(function() { 
    // Image swap on hover 
    $("#gallery li img").hover(function(){ 
     $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
    }); 
    // Image preload 
    var imgSwap = []; 
    $("#gallery li img").each(function(){ 
     imgUrl = this.src.replace('thumb/', ''); 
     imgSwap.push(imgUrl); 
    }); 
    $(imgSwap).preload(); 
}); 
$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
}

来源

2013-03-30 user2016307

这是一个快速解决方案（你将它添加到他们现有的代码，不要编辑他们已经拥有）

$("#gallery li img").hover(function(){ 
    if ($("#main-img:animated").length){ 
     $("#main-img:animated").stop(); 
    } 
    $("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300); 
});

来源

2013-03-30 03:19:54 bruchowski

使用在就是这个样子在他们的例子中，这部分代码的代码

$("#gallery li img").hover(function(){ 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
});

更改为

$("#gallery li img").hover(function(){ 
    $('#main-img').attr('src',$(this) 
        .fadeOut('fast')    
        .attr('src').replace('thumb/', '')); 
});

来源

2013-03-30 03:11:23

嘿谢谢你的帮助，但是当我悬停代码提供的所有拇指开始消失。让我看看我是否可以在jsFiddle中复制行为 – user2016307

我用这伟大的工作bruchowski的代码为了我。我确实改变了，因为当我将鼠标悬停在外时，我获得了双倍的淡入淡出效果，而我只是希望最后的图片能够被粘贴。

我对jquery也很新，并且首先将它粘贴在错误的地方。一旦我将它放在$（imgSwap）.preload（）;之前有效。

我放慢了淡入淡出的速度。

所以我的代码如下：

<script type="text/JavaScript"> 
// prepare the form when the DOM is ready 
$(document).ready(function() { 
    $("#gallery li img").hover(function(){ 
    $('#main-img').attr('src',$(this).attr('src').replace('thumb/', '')); 
}); 
var imgSwap = []; 
$("#gallery li img").each(function(){ 
    imgUrl = this.src.replace('thumb/', ''); 
    imgSwap.push(imgUrl); 
}); 
$("#gallery li img").mouseover(function(){ 
if ($("#main-img:animated").length){ 
    $("#main-img:animated").stop(); 
} 
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 1400); 
}); $(imgSwap).preload(); 
}); 
$.fn.preload = function() { 
this.each(function(){ 
    $('<img/>')[0].src = this; 
}); 
} 
</script>

谢谢！

来源

2013-07-25 22:18:50 Kimley

如何添加淡入淡出效果这个jQuery图片交换库

回答

相关问题