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"); } );});