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

Question

我不确定自己是否做得正确。

这是我的.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()的回调来使其重新淡入。

如果我的操作不正确，请有人解释一下更好的方法吗？我之所以尝试在回调中完成这个操作，是因为我需要淡入发生在新图像完全加载后，否则会出现闪烁。

我正在使用jQuery 1.4版本，并根据http://jquery14.com/day-01/jquery-14，其中提到可以在.attr()方法中使用回调函数。

- Jared

---

在你的 #swapImg 回调函数中，你可以使用 $(this) 来引用 $('#swapImg')。 - Catfish

Answer 1

您可以使用load事件来实现此功能，如下所示：

$("#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");
             });

图片加载事件触发后，淡出效果将开始。

- Nick Craver

---

是的，我运行了你的第一个版本，显然Chrome缓存了它，所以它没有工作。这个版本可以正常工作。 - Jared

只是提醒一下，我认为 fadeIn() 是设计用于元素具有 display:none，而不仅仅是改变不透明度。FadeTo() 对我来说似乎是唯一有效的方法。感谢您的帮助！ - Jared

另外需要注意的是：我使用了这段代码，在淡入过程中出现了轻微的“闪烁”；移除 each() 部分可以解决这个问题。 - Trojan

Answer 2

$("#swapImg").css("opacity", 0).attr("src", productImages[swapIMG])
         .on("load",function(){ //fires each time when image loaded
            $(this).fadeIn("slow");
         });

这也会被正确处理。

- Jitendra Pawar