Geek Answers Handbook

How to remove an item AFTER an animation?

I am using the following code to animate divs.

<script> $(function() { $("a.shift").click(function() { $("#introOverlay").animate({ height: 0, }, 2000) }); }); </script>

When the animation ends, I would like to delete it. How can i do this?

+6
jquery jquery-animate
source share
4 answers

animate takes 2 more parameters, so you can do:

 $("a.shift") .click(function() { $("#introOverlay") .animate({height: 0}, 2000,"linear",function() { $(this).remove(); } ) } );

Unverified.

EDIT: Tested: here is the full page I used that extends to 300 pixels makes the removal more obvious:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function() { $(".shift").click(function() { $("#introOverlay") .animate({height: 300}, 2000,"linear",function() { $(this).remove(); }) }); }); //]]> </script> </head> <body> <a class="shift" href="javascript:void(0)">clickme</a> <div id="introOverlay" style="background-color:red;height:200px;">overlay</div> </body> </html>
+8
source share

JQuery animate (params, [duration], [easing], [callback]) offers the ability to add a callback, which is called for each time the animation is completed

callback (optional) Function: A function that should be executed whenever the animation completes, runs once for each animated element.

The syntax is pretty simple jQuery:

 <script> $(function() { $("a.shift").click(function() { $("#introOverlay").animate({ height: 0, }, 2000, "linear", function() { $("#introOverlay").hide(); } ) }); }) </script>

See also this SO question

+2
source share

Place the remove() call on the effects queue as follows:

 $("a.shift").click(function() { $("#introOverlay").animate({ height: 0, }, 2000); $("#introOverlay").queue(function() { $(this).remove(); $(this).dequeue(); }); });
+1
source share

Use window.timeout with the same amount of time that the animation performed.

-3
source share

More articles:


All Articles