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(); 
     }); 
    }); 

, но он работает, но если я нажимаю # Первый все изображения исчезают

Answer 1

Я не уверен, я понимаю, но то, что я всегда забываю с FadeIn()/Затухание() является что они являются анимациями и происходят асинхронно.

Итак, ваш вызов $ ("# s1"). FadeIn(); начнется, но следующие вызовы .remove(), похоже, будут происходить одновременно.

Что вам нужно сделать, это изменить FadeIn() для использования функции обратного вызова:

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

Таким образом, все REMOVE вызовов не будет происходить до тех пор, после FadeIn() завершает.

Update:

Ваш комментарий, я думаю, что это могло бы быть лучше ответ: Вы используете .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(); 
    }); 

});