运行动画然后删除元素

Question

I am tring to run a simple animation then remove the div since it lies over some buttons so you can not click them after the animation.

JS

$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 );

I tried doing this to remove the element after the animation but it removes it before.

$(".intro").eq(0).delay(800).animate({"opacity":"0"},1000 ).remove();

Answer 1

Remove in animate function's callback:

$(".intro").eq(0).delay(800).animate({opacity: 0}, 1000, function() {
  $(this).remove()
});

Alternatively, add complete function in option object:

$(".intro").eq(0).delay(800).animate({opacity: 0}, {duration: 1000, complete: function() {$(this).remove();}});

You can add more options to it, easing for example. Check the API doc

Answer 2

You can use complete callback to call once the animation is complete :

 $(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() {
      $(this).remove();
 });

Working Demo

Answer 3

Use the complete callback

 $(".intro").eq(0).delay(800).animate({"opacity":"0"},1000, function() { $(this).remove(); } ); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="intro">Hello</div>