0

我在这个设置中使用 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>
4

1 回答 1

1

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

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

更新

如果您不想要淡出，而只想要淡出使用这个：

$(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();
});
于 2011-11-22T14:30:23.750 回答