JQueryAnimation

JQuery Effects

// just show$(“div”).show();

// reveal slowly, slow=600ms$(“div”).show(“slow”);

// hide fast, fast=200ms$(“div”).hide(“fast”);

// hide or show in 100ms

$(“div”).toggle(100);

The “toggle” command will change whatever state the element currently has, and the parameters are both optional. The first parameter indicates the speed of the showing/hiding. If no speed is set, it will occur instantly, with no animation. A number for “speed” represents the speed in milliseconds.

Showing or Hiding Element

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

// do something once the element is hidden

}

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

// do something once the element is shown

}

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

// do something once the element is shown/hidden

}

Remember that the “toggle” command will change whatever state the element currently has, and the parameters are both optional. The first parameter indicates the speed of the showing/hiding. If no speed is set, it will occur instantly, with no animation. A number for “speed” represents the speed in milliseconds. The second parameter is an optional function that will run when the command is finished executing.

Showing or Hiding Element

$(“div”).slideUp();

$(“div”).slideDown(“fast”);

$(“div”).slideToggle(1000);

Sliding Elements

$("#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

}

Sliding Elements

$(“div”).fadeIn(“fast”);

$(“div”).fadeOut(“normal”);

// fade to a custom opacity$(“div”).fadeTo (“fast”, 0.5);

Fading Elements

Fading === changing opacity

To animate an element, you do so by telling jQuery the CSS styles that the item should change to over time.

$("#myElement").animate(

{

opacity: .3,

width: "500px",

height: "700px"

}, 2000, function() {

// optional callback after animation completes

}

);

Animation

$(“div”).hide(“slow”, function() {alert(“The DIV is hidden”);

});

$(“div”).show(“fast”, function() {$(this).html(“Hello jQuery”);

}); // this is a current DOM element

Detecting animation completion

Every effect function has a callback option

Building Custom Animations

To make custom animations, you can use the animate method.

$("#somelement").animate({property: value}, [speed, callback] ); You pass in each property you want

animated along with the final value. The speed and callback parameters are

examples of options that can be set for the method.

.animate( properties, options ) .animate( properties, [ duration ], [ easing ],

[ callback ] ) properties: A map of CSS properties that the

animation will move toward. options: A map of additional options to pass to

the method. Supported options: ▪ duration: A string or number determining how long the

animation will run.▪ easing: A string indicating which easing function to use

for the transition.▪ callback: A function to call once the animation is

complete.

.animate( properties, options )

▪ step: A function to be called after each step of the animation.

▪ queue: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.

▪ specialEasing: A map of one or more of the CSS properties defined by the properties argument and their corresponding easing functions (added 1.4).

jQuery - animate

Not all css properties can be animated

Mostly properties that take a numeric value (example: width, height, ..)

Does not apply to background color, ..

.animate( properties, options ) For example, suppose you want to animate an

element to 90% of its current width, you’d have to do something like:

$("#somelement").animate({width: "90%"}, 350, function(){alert ("The animation has finished running.");});

The above snippet will animate the element to 90% of its width and then alert the user when it has finished.

.animate( properties, options ) Note that you aren’t

limited to dimensions.

You can animate a wide array of properties including opacity, margins, paddings, borders, font sizes.

The method is also pretty flexible when it comes to units. Pixels, ems, percentages all work. So this example will work. It just won’t look cohesive.

$("#somelement").animate({ width: "90%" fontSize:

"14em", height: "183px", opacity: 0.8, marginTop: "2cm", marginLeft: "0.3in", borderBottom: "30mm", }, 350, function(){

alert ("The animation has finished running.");});

When defining a property which consists of more than one word, make a note to define it in camel case. It’s borderTop, not border-top.

jQuery - duration

In milli-seconds Default is 400 ms Can also specify

fast 200 ms slow 600 ms

1000 ms 1 second

The Duration is an optional parameter, i.e.$("#cloud").animate( {"opacity": "0"}); will animate using the default duration

// .animate(options, duration)$(“div”).animate({

width: “90%”,opacity: 0.5,borderWidth:

“5px”

}, 1000);

Custom Animation example

By default animations are queued and then performed one by one

** queue is true by default

Animation queuing effects are achieved in jQuery by chaining.

$(“div”).animate({width: “90%”},100).animate({opacity: 0.5},200).animate({borderWidth: “5px”});

Chaining Animation

The first animation will be performed immediately without waiting/queuing

use queue parameter to disable queuing

$(“div”).animate({width: “90%”},

{queue:false, duration:1000}).animate({opacity : 0.5});

Controlling Animations

Controlling Animations

Queue only works if you’re animating the same element.

To animate multiple elements sequentially, use callbacks

Example: By clicking one button, several animations

will happen - one after the other -

jQuery – callback function

Specify a function to call after effect finishes

$( “p” ).slideDown( 500, callMe );function callMe{ alert( “Do something here” );}

Controlling Animations

Set multiple callbacks. You can pass in a callback function as a parameter/option to the animate function and it will get called after the animation has completed.

$(".button").click(function(){ $("#header").animate({top: "-50"}, "slow", function() { $("#something").animate({height: "hide"}, "slow",

function() { $("ul#menu").animate({top: "20", left: "0"}, "slow", function() { $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");

}); }); }); });

A Closer Look@ some animation functions/methods

jQuery Hide and Show Element

jQuery hide() Method: Example: The following jQuery code will hide the cloud element when the Hide Cloud

button is clicked. $("#hideCloud").click( function(){

$("#cloud").hide(2000);});

jQuery Hide and Show Element

jQuery show() Method: Example: The following jQuery code will show the cloud element when the Show

Cloud button is clicked. $("#showCloud").click( function(){

$("#cloud").show(1500);});

jQuery Animate Opacity of Element

Value of Opacity Vs Transparency

The degree of transparency of an element is controlled by the value of opacity: Opacity = 1 (The element is fully opaque) Opacity = 0 (The element is fully transparent or totally

invisible)

This can be shown in the diagram below:

Examples: Animate Element transparency

Example: The following jQuery code will animate the opacity of

cloud element from 1 (i.e. fully opaque) to 0 (i.e. fully transparent or fully invisible) in 5000 milliseconds (5 seconds) when the Cloud Opacity button is clicked.

$("#opacityCloudShow").click(function() {$("#cloud").animate( {"opacity": "0"}, 5000);});

jQuery Animate Element in Horizontal Direction

jQuery Animate Element in Left Direction and Right Direction

By controlling the left position, the selected element can be moved to the right side or left side easily. By increasing the value to the left (+=), the element will animate to the

RIGHT. By decreasing the value to the left (-=), the element will animate to the

LEFT.

Examples: Animate Element right/left

Example 1: The following jQuery code animate the cloud element

to the right side by 50 pixels when the Move Cloud to Right button is clicked.

$("#moveCloudRight").click(function() {$("#cloud").animate( {"left": "+=50px"}, 4000, "linear" ); });

Example 2: The following jQuery code animate the cloud element

to the left side by 50 pixels when the Move Cloud to Right button is clicked.

$("#moveCloudRight").click(function() {$("#cloud").animate( {"left": "-=50px"}, 4000, "linear" ); });

jQuery Animate Element in Vertical Direction

jQuery Animate Element up/down

By controlling the top position, the selected element can be moved up and down easily. By increasing the value to the top (+=), the element will animate

DOWN. By decreasing the value to the top (-=), the element will animate UP.

Examples: Animate Element up/down

Example 1: The following jQuery code animate the sun

element UP by 30 pixels when the Move Sun Up button is clicked.

$("#moveSunUp").click(function() {$("#sun").animate( {"top": "-=30px"}, 4000, "linear" ); });

Example 2: The following jQuery code animate the sun

element DOWN by 30 pixels when the Move Sun Down button is clicked.

$("#moveSunDown").click(function() {$("#sun").animate( {"top": "+=30px"}, 4000, "linear" ); });

jQuery Resize Width and Height of Element

The above jQuery example resize the selected element by increasing the width and height.

jQuery Resize Element

The selected element can be resized bigger or smaller

By increasing the value of height (+=), the height will animate taller.

By decreasing the value of height (-=), the height will animate shorter.

By increasing the value of width (+=), the width will animate wider.

By decreasing the value of width (-=), the width will animate shorter.

jQuery Resize Width and Height of Element

Another way to resize selected element is to animate the selected element to a specified height and width.

Examples: Resize Width and Height

Example 1: The following jQuery code resizes or animates the frame

element by increasing the height by 30 pixels and increasing the width by 40 pixels when the Frame Resize button is clicked.

$("#frameSizeChange").click(function() {$("#frame").animate( {"height": "+=30px", "width": "+=40px"}, 1000 );});

Example 2: The following jQuery code animates the frame element by

setting the height to 270 pixels and the width to 650 pixels when the Frame Resume button is clicked.

$("#frameSizeResume").click(function() {$("#frame").animate( {"height": "270px", "width": "650px"}, 1000 );});

Examples: Callback

jQuery Callback example: An alert box with the message "Animation completed!" will pop up after the animation is completed.

$("#moveSunDown").click(function() {$("#sun").animate( {"top": "+=50px"}, 5000, function() { showComplete() } );});

function showComplete(){alert("Animation completed!");}

The callback parameter can also be written as below:

$("#moveSunDown").click(function() {$("#sun").animate( {"top": "+=50px"}, 5000, function() { alert("Animation Completed"); } );});

An alert box with the message "Animation completed! The cloud is fully transparent now!" will pop up after the animation is completed.

$("#opacityCloudShow").click(function() {$("#cloud").animate( {"opacity": "0"}, 5000, function() { showComplete() } );});

function showComplete(){alert("Animation completed! The cloud is fully transparent now!");}

The callback parameter can also be written as below:

$("#opacityCloudShow").click(function() {$("#cloud").animate( {"opacity": "0"}, 5000, function() { alert("Animation Completed"); } );});