显示隐藏多个具有效果的 div答案

【问题标题】：show hide multiple divs with effects显示隐藏多个具有效果的 div
【发布时间】：2013-10-29 23:45:44
【问题描述】：

这应该相当简单。我有一个 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，然后将其脉动。所以它在您看到效果之前就出现了。可能有更好的方法来编写代码。有任何想法吗？谢谢。

【问题讨论】：

你能做一个 JSFiddle 或类似的吗？

标签： jquery html show-hide jquery-effects

【解决方案1】：

试试这个：

<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 完成后才开始切换内容并显示新内容。

【讨论】：

【解决方案2】：

<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>

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

【讨论】：