0

サムネイルを表示し、サムネイルをクリックするとメイン画像が更新される既存のJavascript（またはjquery）を知っている人はいますか。

これに加えて、別のサムネイルをクリックすると、現在表示されている画像がフェードアウトしてから、新しい画像がフェードインすることが重要な要件です (クロス フェード)。

照明のデモンストレーションを促進するためにこれを行うことを検討しているので、フェードが重要な部分です.

前もって感謝します、

（これが正しいセクションにあり、正しく質問されていることを願っています！そうでない場合は申し訳ありませんが、私はこれに慣れていません）

4

1 に答える 1

1

私はこれを作成しました。

http://jsfiddle.net/K7ANs/

$('.thumbnail').on('click',function(){
    $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />');
    $('#imageWrap .active').fadeOut(1000);
    $('#imageWrap .next').fadeIn(1000, function(){
        $('#imageWrap .active').remove();
        $(this).addClass('active');
    });
});

アップデート：

現在のアニメーションが終了するまでユーザーが別のサムネイルをクリックするのを防ぐために、関数を if ステートメントでラップして、画像がアニメーション化されているかどうかを確認しました。また、2 つの画像があるかどうかを確認することもできました (アニメーション中に 2 つあり、終了するともう 1 つが削除されるため)。

$('.thumbnail').on('click',function(){
    if (!$('#imageWrap .active').is(':animated')){
        $('#imageWrap').append('<img src="' + $(this).attr('src') + '" class="next" />');
        $('#imageWrap .active').fadeOut(1000, function(){
            $(this).remove(); // I moved this from the other function because targeting $(this) is more accurate.
        });
        $('#imageWrap .next').fadeIn(1000, function(){
            $(this).addClass('active');
        });
    }
});

ここに更新された jsFiddle があります

ソース

jQuery API - :アニメーションセレクター
jQuery API - .is()
jQuery API - .fadeIn()
jQuery API - .fadeOut()

于 2013-04-22T15:03:52.173 に答える