Sunday, 27 October 2013

JQuery guide for beginner’s part 7 – Animating the Elements with JQuery

You can slide elements, animate elements, and even stop animations in mid-sequence. We have few methods to animate the elements .slideDown() method is use to slide down the element from up and we can assign the speed with parameter to be set like fast or slow, .slideUp() method is use to slide up the element from down to up and .slideToggle() method is use to slide up/slide down the elements as per the mention speed.

To slide elements up or down:

$("#myElement").slideDown("fast", function() {

// do something when slide down is finished

}

$("#myElement").slideUp("slow", function() {

// do something when slide up is finished

}

$("#myElement").slideToggle(1000, function() {

// do something when slide up/down is finished

}

To animate an element, you do so by telling jQuery the CSS styles that the item should change to. jQuery will set the new styles, but instead of setting them instantly (as CSS or raw JavaScript would do), it does so gradually, animating the effect at the chosen speed:

Animation with jQuery is very powerful, and it does have its quirks (for example, to animate colors, you need a special plugin). It's worth taking the time to learn to use the animate command in-depth, but it is quite easy to use even for beginners.