1 / 38

JQuery Animation

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

flavio
Download Presentation

JQuery Animation

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JQuery Effects JQueryAnimation

  2. 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.

  3. 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.

  4. Sliding Elements • $(“div”).slideUp(); • $(“div”).slideDown(“fast”); • $(“div”).slideToggle(1000);

  5. 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 • }

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

  7. 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 • } • );

  8. 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

  9. 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 optionsthat can be set for the method.

  10. .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.

  11. .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).

  12. 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, ..

  13. .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.

  14. .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.

  15. 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

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

  17. 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”});

  18. 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});

  19. 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 -

  20. jQuery – callback function • Specify a function to call after effect finishes $( “p” ).slideDown( 500, callMe ); function callMe { alert( “Do something here” ); }

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

  22. A Closer Look @ some animation functions/methods

  23. jQuery Hide and Show Element jQueryhide() Method: • Example: • The following jQuery code will hide the cloud element when the Hide Cloud button is clicked. • $("#hideCloud").click( function(){$("#cloud").hide(2000);});

  24. 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);});

  25. jQuery Animate Opacity of Element

  26. Value of Opacity VsTransparency 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:

  27. 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);});

  28. jQuery Animate Element in Horizontal Direction

  29. 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.

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

  31. jQuery Animate Element in Vertical Direction

  32. 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.

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

  34. jQuery Resize Width and Height of Element The above jQuery example resize the selected element by increasing the width and height.

  35. 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.

  36. 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.

  37. 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 );});

  38. 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() } );}); • functionshowComplete(){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() } );}); • functionshowComplete(){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"); } );});

More Related