不确定我是否正确这样做。
这是我的.js
:
var currentIMG;
$( '.leftMenuProductButton' ).hover(function () {
currentIMG = $("#swapImg").attr("src");
var swapIMG = $(this).next(".menuPopup").attr("id");
$("#swapImg").css("opacity", 0)
.attr("src", productImages[swapIMG], function(){
$("#swapImg").fadeTo("slow", 1);
});
}, function () {
$("#swapImg").stop().attr("src",currentIMG);
});
我要做的是将IMG不透明度设置为0(#swapImg
),将其替换为src
,然后将其淡入淡出。所以我尝试使用回调淡化它来自.attr()
。
如果我这样做不正确,有人可以解释更好的方法吗?我在回调中尝试这样做的原因是我需要fadeTo只在新图像完全加载后才出现,否则它会闪现一点。
我正在使用jQuery 1.4,根据http://jquery14.com/day-01/jquery-14,您可以在.attr()
方法中进行回调。
答案 0 :(得分:7)
您可以使用以下加载事件执行此操作:
$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG])
.one("load",function(){ //fires (only once) when loaded
$(this).fadeIn("slow");
}).each(function(){
if(this.complete) //trigger load if cached in certain browsers
$(this).trigger("load");
});
fade将在图像加载事件触发后开始。
答案 1 :(得分:0)
$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG])
.on("load",function(){ //fires each time when image loaded
$(this).fadeIn("slow");
});
这也是正确的。