[solved] Fade out and remove a div

1,613 Posts

fourroses666 Reply #1, 13 years, 4 months ago

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>

[ed. note: fourroses666 last edited this post 13 years, 4 months ago.]

Evolution user, I like the back-end speed and simplicity

- 1,613 Posts
fourroses666 Reply #2, 13 years, 4 months ago
```
$('.go-away').click(function() {
    $(this).parent().fadeOut();
});
```
Evolution user, I like the back-end speed and simplicity