Question

我有这些HTML代码：

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

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

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

但它的工作方式如下：我点击按钮（#yes）它会在此过程中逐渐淡出旧元素，然后淡出新的元素，当淡出完成时两个元素都不会被置换，问题是什么？附：对不起我的英文

Answer 1

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

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

由于您的新内容理想情况下会load进入容器。我正在清空面板，并添加动态内容。

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

淡出元素隐藏了淡化的元素

1 个答案: