If you have started using jQuery you might ask the question “how to do I run multiple animations at once in jQuery?”. Well it’s much easier than you might think! jQuery is set to automatically run multiple actions at one time. I’m going to give you a code example to show you how you would do this. Here is the code broken up into sections:
HTML
Basically I have created 3 sections in the HTML. Using CSS I will turn them into boxes and give them some annoying colors.
CSS
I wanted to do some cool things with jQuery. Box 3 will be partially hidden from view when it bounces. This happens because the CSS property overflow is set to “hidden” in Box2.
jQuery
At first when you look at this, you might think that jQuery is going to animate box1. STOP. Animate box2. STOP. Then animate box3 and then STOP. If you did think that you aren’t alone. I thought the same thing. I thought that the “$” had magical powers that only ran the jQuery that it contained. If you type this code out you will see that all the boxes run at the same time. Because I used the same duration on each line all animations would start and end at the same time. If I mixed up the times then we can have then end at different times. If you did change the duration the start time would continue to be synced!
I really hope you try this code out. I thought the animation while being simple is very smooth and kind of fun!
Leave a Reply