0

この単純な jQuery 画像ギャラリーを作成しましたhttp://jsfiddle.net/RVermeulen/XNsHC/3/

しかし、これを行うと (fadeOut と In を使用して)、次のようになるため、fadeOut と In を適切に作成することはできません。

$(document).ready(function() {

    $(".small_image").click(function() {
        event.preventDefault();
        var image = $(this).attr("rel");
        $('#current_image').fadeOut(300);
        $('#current_image').html('<img width="370" src="' + image + '"/>');
        $('#current_image').fadeIn(300);
    });

});

.html 関数は FadeIn よりも速く読み込まれるように見えるため、「スムーズな」フェードではありません。遅延などでこれを修正する方法を知っている人はいますか?

4

2 に答える 2

1

画像がフェードアウトした後に画像を変更するには、完全なコールバックを使用する必要があります。

$(".small_image").click(function () {
    event.preventDefault();
    var image = $(this).attr("rel");
    $('#current_image').fadeOut(300, function() {
        $('#current_image').html('<img width="370" src="' + image + '"/>');
        $('#current_image').fadeIn(300);
    });
});

jsFiddle の例

于 2013-08-12T18:51:07.157 に答える