Как изменить анимацию на каждый второй клик?

у меня есть 6 «блоки» и каждый из которых содержит различные тексты, для простоты давайте рассмотрим их как мои «блоки»Как изменить анимацию на каждый второй клик?

<div id="block1"> <h2> Block1 </h2> </div

У меня есть 3 из них видимых и 3 скрытых. У меня есть кнопка, которая заменяет соответствующие блоки

$(".showmore").click(function(){ 

    $("#block1").fadeOut("slow", function(){ 
     $(this).replaceWith($("#block4").html()); 
     $(this).fadeIn("slow"); 
    }); 

    $("#block2").delay(400).fadeOut("slow", function(){ 
     $(this).replaceWith($("#block5").html()); 
     $(this).fadeIn("slow"); 
    }); 

    $("#block3").delay(800).fadeOut("slow", function(){ 
     $(this).replaceWith($("#block6").html()); 
     $(this).fadeIn("slow"); 
    }); 

    $(this).text('Show less'); 

});

Это прекрасно работает, но понятия не имеет, как вернуть его. Я попытался клонировать элементы в переменную, а затем загружать их, но кажется, что идентификатор исчез, потому что, когда я пытаюсь скрыть блок1 или блок4, ни один из них не исчезает. Может ли кто-нибудь помочь?

источник

2016-08-22 Paralyz3d

добавьте еще код HTML или укажите код на jsfiddle –

Связанный http://stackoverflow.com/questions/2132090/jquery-reversing-animation-on-second-click http://stackoverflow.com/questions/ 27166633/reverse-animation-on-a-second-click – yuriy636

Как я понял, у вас есть 3 div, что вы хотели бы вернуть их обратно к содержимому, которое они имели после события fadeout/fadein при щелчке другого div. Проблема с вашей попыткой заключается в использовании метода replaceWith. Это то, чего вы ищете? См. Скрипку here.

$(".showmore").click(function(){ 
    $("#block1").fadeOut("slow", function(){ 
     //save the content of the hidden block to a variable 
      var html = $("#block4").html(); 
     //put the content of the current div to the hidden div, to be used on the next click 
     $("#block4").html($(this).html()); 
     //show the content of the hidden div 
     $(this).html(html); 
     $(this).fadeIn("slow"); 
    }); 

    $("#block2").delay(400).fadeOut("slow", function(){ 
     var html = $("#block5").html(); 
     $("#block5").html($(this).html()); 
     $(this).html(html); 
     $(this).fadeIn("slow"); 
    }); 

    $("#block3").delay(800).fadeOut("slow", function(){ 
     var html = $("#block6").html(); 
     $("#block6").html($(this).html()); 
     $(this).html(html); 
     $(this).fadeIn("slow"); 
    }); 

    $(this).text('Show less'); 

});

Как вы видите, я копирую содержимое div в соответствующий скрытый. Подобно этому вы можете в основном переключать данные на каждый клик.

источник

2016-08-22 11:57:30 avi

Мне нужно именно это, спасибо вам большое! – Paralyz3d

рад помочь вам :) – avi

Одна идея была бы fadeout и fadein вместо replaceWith. Затем вы можете проверить, какой блок виден и который невидим.

var visible, invisible; 
if ($("#block1").is(":visible")) { 
    visible = "#block1"; 
    invisible = "#block4"; 
} else { 
    visible = "#block4"; 
    invisible = "#block1"; 
} 
$(visible).fadeOut("slow", function(){ 
    $(invisible).fadeIn("slow"); 
});

Не уверен, что это дает вам такую же функциональность.

источник

2016-08-22 11:03:57 aandis

Как изменить анимацию на каждый второй клик?

ответ

Смежные вопросы