如何在每次点击时反转动画？

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

不确定这是否给你相同的功能。