如何在每次點擊時反轉動畫？

Question

我有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');

});

它工作正常，但不知道如何還原它。 我試圖將元素克隆到變量然后加載它們但似乎id已經消失，因為當我試圖隱藏block1或block4時，它們都沒有消失。 有人可以幫忙嗎？

Answer 1

據我了解，你有3個div，你希望將它們恢復到他們在點擊另一個div后的淡出/淡化事件后所擁有的內容。 您嘗試的問題是使用replaceWith方法。 這是你想要實現的目標嗎？ 請看這里的小提琴。

$(".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的內容復制到相應的隱藏的內容。 像這樣你基本上可以在每次點擊時切換數據。

Answer 2

一個想法是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");
});

不確定這是否給你相同的功能。