JQuery Effects JQuery Animation

Showing or Hiding Element // 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.

Sliding Elements $(“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

Fading === changing opacity Fading Elements $(“div”).fadeIn(“fast”); $(“div”).fadeOut(“normal”); // fade to a custom opacity $(“div”).fadeTo (“fast”, 0.5); Fading === changing opacity

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

Detecting animation completion $(“div”).hide(“slow”, function() { alert(“The DIV is hidden”); }); $(“div”).show(“fast”, function() { $(this).html(“Hello jQuery”); }); // this is a current DOM element 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

Custom Animation example // .animate(options, duration) $(“div”).animate({ width: “90%”, opacity: 0.5, borderWidth: “5px” }, 1000);

Chaining Animation 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”});

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