jQuery：在fadeIn函数上触发消息

Question

我目前使用的是ImageZoom插件（view here），该插件非常棒，魅力十足。但对于我正在处理的图像（需要放大的图像）正在通过$("CONTAINER_CLASS_HERE").html('...etc附加到其容器中，因此在加载时不存在（此功能需要保留），这意味着虽然ImageZoom()功能不起作用，即使在fadeIn功能中调用它时也是如此。

的jsfiddle演示在这里：http://jsfiddle.net/y2tdaak2/

的jQuery：

$(document).ready(function() { 
    $('.single-letting-lightbox-image').ImageZoom(); 

    $("button").click(function() { 
     var imgUrl = $(this).data('rel'); 
     $("#area").fadeIn(); 
     $(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />") 
      .hide().imagesLoaded(function() { 
      $(this).delay(500).fadeIn(500, function() { 
       $(this).ImageZoom(); 
      }); 

     }); 
    }); 

}); 

如何得到这个工作将不胜感激任何建议，不能看着办吧！

Answer 1

在这里，你是一个有效的解决方案:) http://jsfiddle.net/y2tdaak2/1/

$(document).ready(function() {   

     $("button").click(function() { 
      var imgUrl = $(this).data('rel'); 
      $("#area").fadeIn(); 
      $(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />") 
       .hide().imagesLoaded(function() { 
       $(this).delay(500).fadeIn(500, function() { 
        $('.single-letting-lightbox-image').ImageZoom(); 
       }); 

      }); 
     }); 

    }); 

您需要的图像加载后调用ImageZoom :)

Answer 2

你试过回调函数吗？

$("button").click(function() { 
    var imgUrl = $(this).data('rel'); 
    $("#area").fadeIn(); 
    $(".single-letting-lightbox-image-wrap").html("<img src='" + imgUrl + "' class='single-letting-lightbox-image' />") 
     .hide().imagesLoaded(function() { 
     $(this).delay(500).fadeIn(500, function() { 
      $(this).ImageZoom(); 
     }); 
    }); 
// callback the function to make it work again since the way you do this is not yet loaded 
$('.single-letting-lightbox-image').ImageZoom(); 

});