在 jQuery 工具中将 fadeTo() 更改为 fadeIn() 时遇到问题

Question

我正在使用 具有此设置的 jQuery Tools Scrollable。我在更改大图像的过渡效果时遇到问题。

当您单击缩略图时，大图像会淡出和淡入（您可以在演示中看到此行为 访问链接）。我只将大图像淡入。

我认为这就像将 var wrap = ... fadeTo() 中的转换更改为 fadeIn() 一样简单，但事实并非如此。我还更改了 wrap.fadeTo() 行上的转换，但这不起作用。

有什么想法吗？我从示例中删除了不必要的代码...

$(function() {
    $(".scrollable").scrollable();

    $(".items img").click(function() {
        if ($(this).hasClass("active")) { return; }

        var url = $(this).attr("src").replace("_t", "");
        var wrap = $("#image_wrap").fadeTo("medium", 0.5);
        var img = new Image();

        img.onload = function() {
            wrap.fadeTo("fast", 1);
            wrap.find("img").attr("src", url);
        };

        img.src = url;
        $(".items img").removeClass("active");
        $(this).addClass("active");
    }).filter(":first").click();
});

HTML

<div id="image_wrap">Large image goes here</div>
<div class="scrollable">
    <div class="items">
        <div>
            thumbnails go here
        </div>
    </div>
</div>

Answer 1

什么是img？并且您无法将 .load() 函数添加到已加载的内容中，而且如果您将多个 .load() 函数添加到 1 个元素，它也会加载后，之前绑定的所有.load()函数也会被调用。

也许您不想在调用 .fadeTo() 方法之前执行 .stop(true, false) ，因为如果您已经褪色，它会停止它，清除队列并淡入新位置。所以你不必等到它部分加载。

更新

如果您不想淡出，而只想淡入淡出，请使用以下命令：

$(function() {
    $(".scrollable").scrollable();

    $(".items img").click(function() {
        if ($(this).hasClass("active")) { return; }

        var url = $(this).attr("src").replace("_t", "");
        var wrap = $("#image_wrap"); // This line edited
        var img = new Image();

        img.onload = function() {
            wrap.css("opacity", 0.5).fadeIn(); // This line edited
            wrap.find("img").attr("src", url);
        };

        img.src = url;
        $(".items img").removeClass("active");
        $(this).addClass("active");
    }).filter(":first").click();
});