JQuery удалить несколько элементов и элемент fadeIn - PullRequest
Новая
       19

JQuery удалить несколько элементов и элемент fadeIn

0 голосов
/ 10 января 2012

Я делаю слайдер функций с помощью jquery, и я хочу, чтобы во вкладке с идентификатором #second щелкали другие изображения на # s2 image.

Я пытался 

$(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, все изображения исчезнут

1 Ответ

0 голосов
/ 10 января 2012

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

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

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

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

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

Обновление:

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

});
...