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()。

如果我这样做不正确，有人可以解释更好的方法吗？我在回调中尝试这样做的原因是我需要fadeTo只在新图像完全加载后才出现，否则它会闪现一点。

我正在使用jQuery 1.4，根据http://jquery14.com/day-01/jquery-14，您可以在.attr()方法中进行回调。

Answer 1

您可以使用以下加载事件执行此操作：

$("#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将在图像加载事件触发后开始。

Answer 2

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

这也是正确的。

在attr（）回调中执行函数？

2 个答案: