javascript - jQuery:触发淡入函数调用

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 :)