在attr()回调中执行函数?

时间:2010-03-12 20:00:10

标签: jquery callback

不确定我是否正确这样做。

这是我的.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()方法中进行回调。

2 个答案:

答案 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");
         });

这也是正确的。