jquery - 显示隐藏多个具有效果的 div

Question

这应该相当简单。我有一个用于显示/隐藏其他 div 的 div。

单击时，我希望显示的 div 淡出，并且替换它的 div 跳动。

<script>
$(function () {
$(".clicky").click(function () {
    var content_id = $(this).attr('href');
    $('#content').fadeOut(2000).html($(content_id).html()).show("pulsate");;
    return false;
});
});
</script>

问题在于单击此代码首先显示替换的 div，然后将其脉动。所以它在您看到效果之前出现。可能有更好的方法来编写代码。有任何想法吗？谢谢。

Answer 1

<script>
   $(function () {
    $(".clicky").click(function () {
      var content_id = $(this).attr('href');
      $('#content').fadeOut(2000,function(){
         $('#content').html($(content_id).html()).show("pulsate");
      });
      return false;
    });
   });
</script>

这将链接起来，以便只有在您的内容淡出后才会跳动。

Answer 2

试试这个：

<script>
  $(function () {
    $(".clicky").click(function () {
      var content_id = $(this).attr('href');
      $('#content').fadeOut(2000, function(){
        $(this).html($(content_id).html()).show("pulsate");
      });
      return false;
    });
  });
</script>

fadeOut您遇到的问题是，在开始切换内容并显示新内容之前，您没有等待完成。