淡出并移除一个 <div>答案

【问题标题】：Fade out and remove a <div>淡出并移除一个 <div>
【发布时间】：2013-05-04 03:47:59
【问题描述】：

如何淡出以下内容？它也确实需要完全移除，不仅是 alpha 0，还包括 display:none 和 visibility:hidden 在淡出后。

小提琴：http://jsfiddle.net/fourroses666/ywMUx/2/

js:

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
  $('.go-away').click(function() {
      $('.message').removeClass('show');
  });
</script>

css:

<style>
  .message{display:none; visibility:hidden;}
  .message.show{display:block; visibility:visible;}
  .go-away{float:right; cursor:pointer; cursor:hand;}
</style>

html:

<div class="message show">Pizza is nice! <div class="go-away">x</div></div>

【问题讨论】：

这可以很容易地修改为只是淡出。 stackoverflow.com/questions/12584481/…

标签： removeclass fadeout

【解决方案1】：

试试这个

$('.go-away').click(function() {
    $(this).parent().fadeOut();
});

【讨论】：

【解决方案2】：

fadeOut 使它不可见，400 是淡出的毫秒数，然后function() { $(this).remove() } 是回调函数（在fadeOut 动画完成后调用），它将从 DOM 中删除元素。这是一个有效的fiddle。让我知道这是否有帮助或者您有任何问题:)

  $('.go-away').click(function() {
      $('.message').fadeOut(400, function() {
          $(this).remove();
      });
  });

【讨论】：