javascript - JqueryのfadeIn/fadeOutの画像変更

Question

私はこの地雷のバグを約 3 時間修正しようとしてきましたが、あらゆる場所を検索しましたが、答えが見つかりません。

#test は img 要素です。要素を最初にフェードアウトさせ、次に画像を変更してからフェードインさせます。しかし、それをクリックすると、フェードアウトしながら画像が変更され、すでに変更された画像でフェードインします。ここで何が問題なのですか？animate() 関数や stop() などを使用する必要がありますか? 本当に混乱しています、javascriptとjQueryはとても難しいです

    $("#test").click(function(){
    ASD = $("#test").attr('alt');
    $("#test").fadeOut(700);
    $("#test").attr('src', ASD);
    $("#test").fadeIn(700);

Answer 1

.fadeOut()アニメーションの終了時に呼び出されるコールバック パラメータを使用する必要があります。

  $("#test").click(function(){
    ASD = $("#test").attr('alt');
    $("#test").fadeOut(700, function() {
       $("#test").attr('src', ASD);
       $("#test").fadeIn(700);
    });
  });

Answer 2

ソースを置き換えて 2 番目のアニメーションを開始する前に、最初のアニメーションが終了するまで待機するように、fadeOut のコールバックを使用する必要があります。

$("#test").on('click', function(){
    var ASD = $(this).attr('alt');
    $(this).fadeOut(700, function() {
        $(this).attr('src', ASD).fadeIn(700);
    });
});

Answer 3

でコールバック オプションを使用しますfadeOut()。これにより、fadeOut が終了した後にのみ他のアクションが実行されるようになります。

$("#test").click(function(){
    ASD = $("#test").attr('alt');
    $("#test").fadeOut(700, function() {
        $("#test").attr('src', ASD);
        $("#test").fadeIn(700);
    });
});