[英]How can I add fade effect to this jQuery Image Swap Gallery
我想知道如何使用此示例进行悬停时添加淡入淡出效果http://www.designchemical.com/lab/jquery/demo/jquery_demo_image_swap_gallery.htm
我想知道是否有可能实现像www.bungie.net这样的目标
这是示例中使用的代码
$(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;
});
}
我使用了bruchowski的代码,对我来说非常有用。 我确实将.hover更改为.mouseover,因为当鼠标移出时我得到了双淡入淡出的效果,我只希望最后鼠标悬停在图像上。
我对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>
谢谢!!!
在这部分代码中,例如他们的示例
$("#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/', ''));
});
这是一个快速的解决方案(您可以将其添加到他们现有的代码中,不要编辑他们已有的内容)
$("#gallery li img").hover(function(){
if ($("#main-img:animated").length){
$("#main-img:animated").stop();
}
$("#main-img").css("opacity", "0").animate({"opacity":"1"}, 300);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.