Fade out and remove a

Question

How can I fade out the following? It does also need to be removed completely, not just only alpha 0 but also display:none and visibility:hidden after the fade out.

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

This can easily be modified to just fade out. http://stackoverflow.com/questions/12584481/simple-fade-in-fade-out-div-with-jquery-on-click — Frankie Bobb, May 09 '13 at 15:42

score 2 · Accepted Answer · answered May 09 '13 at 15:45

2

Try this

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

answered May 09 '13 at 15:45

Sam

2,771
2
28
41

score 0 · Answer 2 · answered May 09 '13 at 15:48

fadeOut makes it invisible, the 400 is how many milliseconds to fade out over, and then function() { $(this).remove() } is the callback function (called after the fadeOut animation has completed) that will remove the element from the DOM. Here's a working fiddle. Let me know if this helps or if you have any questions :)

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

Fade out and remove a

2 Answers2