淡出元素隐藏淡入的元素

【问题标题】：Fadeout elements hide elements which fadein淡出元素隐藏淡入的元素
【发布时间】：2011-07-04 15:15:39
【问题描述】：

我有这些 html 代码：

  <body>
    <div id="top">
      <div id="panels">
         <div id="yes">yes</div>
         <div id="no">no</div>
      </div>
    </div>
  </body>

我使用 jQuery（我不是专家）淡出旧元素并通过 ajax 添加新元素（ajax 代码现在还没有准备好）..so 代码：

$(document).ready(function(){
jQuery('#yes').click(function(){
    $('#panels').fadeOut(1000);
    var fun = $('<div>ITS OVER</div>');
    $(fun).hide().appendTo('#panels').fadeIn(1500);
});
});

但它的工作原理是：我单击按钮 (#yes) 在此过程中它开始淡出旧元素它淡入新的，当淡出完成时两个元素都没有显示，有什么问题？附：对不起我的英语

【问题讨论】：

标签： jquery ajax append fadein fadeout

【解决方案1】：

您将其附加到隐藏容器$('#panels').fadeOut(1000);。

您可以只隐藏子 $('#panels').children().fadeOut(1000) 而不是整个容器。

因为您的新内容最好将load 放入容器中。我正在清空面板，并添加动态内容。

$('#panels').fadeOut(1000, function(){
    $(this)
        .html('<div>ITS OVER</div>')
        .fadeIn(1500);
})

【讨论】：

+1 回调更简洁，除了您将新元素附加到子元素而不是 #panels。
实际上还要考虑一件事。因为有 2 个子元素，回调将触发两次，创建 2 个新元素。编辑：淡化#panels，隐藏孩子，附加新的，然后淡入#panels可能更简单。