Question

我有6个＆＃34;块＆＃34;并且每个都包含不同的文本，为了简单起见，我们只考虑这些作为我的＆＃34;块＆＃34;

<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方法。这是你想要实现的目标吗？请参阅小提琴here。

index.html

如您所见，我将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");
});

不确定这是否会为您提供相同的功能。

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

2 个答案: