jQuery刪除多個元素和fadeIn元素

Question

我正在製作一個jQuery的功能滑塊，我希望當標籤與id #second點擊以用＃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(); 
    }); 

});