jQueryは複数の要素とfadeIn要素を削除します

Question

jqueryで機能スライダーを作成しています。id＃のタブがクリックされて他の画像を＃s2画像に置き換えるときに欲しいです。

私は

$(document).ready(function() { 
    $("#second").click(function(){ 
    $("#s1").remove(); 
    $("#s3").remove(); 
    $("#s4").remove(); 
    $("#s5").remove(); 
    $("#s2").fadeIn(); 
    }); 
}); 
$(document).ready(function() { 
     $("#first").click(function(){ 
     $("#s1").fadeIn(); 
     $("#s3").remove(); 
     $("#s4").remove(); 
     $("#s5").remove(); 
     $("#s2").remove(); 
     }); 
    }); 

を試してみましたが、それは動作しますが、私は#firstクリックすると、すべての画像は私が理解していないが、私はいつもフェードイン（と忘れて何

Answer 1

を消える）/フェードアウト（）でありますそれらがアニメーションであり、非同期的に発生することを示します。

したがって、$（ "＃s1"）。fadeIn（）;を呼び出してください。一見、同時に次の.remove（）コールが発生します。完了）

$("#s1").fadeIn('normal', function() { 
    $("#s3").remove(); 
    $("#s4").remove(); 
    $("#s5").remove(); 
    $("#s2").remove(); 
}); 

そのように、削除呼び出しのすべてがフェードイン（後まで発生しません。あなたがする必要がどのような

は、コールバック関数を使用するために呼び出す）（フェードインを変更です。

は

更新：あなたのコメントから

、私はこれは良い答えかもしれないと思う：あなたは.removeを（）を使用しているが、それはページ...戻ってそれらを得るための方法はありませんから要素を削除します。あなたがしたいのは、要素を隠すために.hide（）を使うことです。後でそれらを表示するために.fadeIn（）を呼び出すことができます。

$(document).ready(function() { 
    $("#second").click(function(){ 
     $("#s1").hide(); 
     $("#s3").hide(); 
     $("#s4").hide(); 
     $("#s5").hide(); 
     $("#s2").fadeIn(); 
    }); 

    $("#first").click(function(){ 
     $("#s3").hide(); 
     $("#s4").hide(); 
     $("#s5").hide(); 
     $("#s2").hide(); 
     $("#s1").fadeIn(); 
    }); 

});