Jared Heinrichs

  • Technology Blog
  • Winnipeg Computer Repair
  • Winnipeg Photographer
  • Cooking With Jared
You are here: Home / Programming / jQuery / jQuery – How to run multiple animations at once

Dec 20, 2010 By Jared Heinrichs Leave a Comment

jQuery – How to run multiple animations at once

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

image

Basically I have created 3 sections in the HTML.  Using CSS I will turn them into boxes and give them some annoying colors.

CSS

image

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

image

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!

Filed Under: jQuery

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • Board Game Rules
  • Camera
  • Computer Hardware
    • Blackberry
    • drivers
    • iPad
    • Magic Jack
    • USB
  • Damn Small Linux
  • Exam Notes
  • Facebook
  • FREE Flashcards
  • Games
    • PC
      • League of Legends
    • Wii
    • xbox 360
  • Music
  • Networking
    • Cisco Certification
    • Mitel
    • Palo Alto Firewall
  • News
    • Google
    • Microsoft
  • Operating System
    • Active Directory (2003)
    • Android
    • Command Prompt
    • Damn Small Linux
    • Group Policy
    • Hyper-V
    • IIS
    • ISA 2006
    • Mac OS X
    • Microsoft Exchange Server
    • Powershell
    • Security
    • SME Server
    • Terminal Server 2003
    • Ubuntu Linux
      • Adito Web SSL VPN
      • OpenVpn-als
      • Webmin
    • Virtual Machine Manager
    • Windows 2003 SBS
    • Windows 2003 Server
    • Windows 2008
    • Windows 2008 R2
    • Windows 2012R2
    • Windows 7
    • Windows 8
    • Windows Command Line
    • Windows Deployment Services
    • Windows Server Backup
    • Windows Vista
    • Windows XP
  • Phones
  • Photography
  • Photos
    • Animals
    • Misc
    • Nature
    • Portraits
  • Portfolio
  • Programming
    • CSS
    • HTML
    • jQuery
    • MySQL
    • PHP
    • Script
  • Programs
    • Acrobat
    • Acrobat Reader
    • Adobe Dreamweaver
    • Adobe Illustrator
    • Adobe Photoshop
    • Anti-virus Software
    • Antivirus
    • Backup Exec
    • Bittorent
    • Blackberry BESADMIN
    • Internet Explorer 9
    • Lightroom
    • Microsoft Office
    • Netbeans
    • Onenote
    • Outlook
    • Shelby
    • Sysprep
    • Trend
    • Video Editing
    • Visual Studio
    • Windows Live Writer
    • WireShark
    • XP Mode
    • Zarafa
  • Recipe
  • Review
  • Software Links
  • Troubleshooting
  • Uncategorized
  • Videos
  • Web Applications
    • Brage
    • Google
    • Spiceworks
    • Wordpress
  • Web Browsers
    • Internet Explorer
  • Web Server
    • XAMPP
  • Winnipeg
    • ISP

Try searching this site!

Copyright © 2021 Winnipeg Web Design