0

この設定では、jQueryToolsScrollableを使用しています。大きな画像のトランジション効果を変更できません。

サムネイルをクリックすると、大きな画像がフェードアウトおよびフェードインします（この動作は、リンクにアクセスしてデモで確認できます）。フェードインするのは大きな画像だけです。

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)また、メソッドを呼び出す前にa を実行したくない.fadeTo()場合もあります。既にフェードしている場合は、それを停止し、キューをクリアして、新しい位置にフェードするからです。したがって、部分的にロードされるまで待つ必要はありません。

アップデート

フェードアウトが必要なく、フェードインのみが必要な場合は、次を使用します。

$(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 に答える