Home > Developer > JavaScript
Jquery animation effect learning notes (8 effects) and jquery learning notes
1. Display and hide Elements
Simple display and Hiding Methods
<Script type = "text/javascript"> function f1 () {// hide $ ("div "). hide (); // display: none // document. getElementById ('id '). style. display = "none";} function f2 () {// display $ ("div "). show (); // display: block} function f3 () {$ ("div "). toggle () ;}</script> <style type = "text/css"> div {width: 300px; height: 200px; background-color: blue ;} </style> <body> <div> duck and dog </div> <input type = "button" value = "hide" onclick = "f1 () "/> <input type =" button "value =" display "onclick =" f2 () "/> <input type =" button "value =" Switch effect "onclick =" f3 () "/> </body>
CSS supports two methods to display and hide elements, namely, using the visibility or display style. They control the same effect when the elements are displayed and hidden, but the results are different.
The details are as follows:
2. Display and hide sliding Effects
Speed: Set the speed of the effect (slow (600) normal (400) fast (200) Time (milliseconds ))
Callback: the callback function automatically called after the result is executed.
<Script type = "text/javascript"> function f1 () {// hide $ ("div "). slideUp (3000, function () {alert ('I am gone, can you see');} function f2 () {// display $ ("div "). slideDown (3000, function () {alert (' ') ;}); // display: block} function f3 () {$ ("div "). slideToggle (1000);} $ (function () {// cylinder sliding effect // setInterval ("f3 ()", 1000 );}); </script> <style type = "text/css"> div {width: 300px; height: 200px; background-color: blue ;} </style> <body> <div> duck and dog </div> <input type = "button" value = "hide" onclick = "f1 () "/> <input type =" button "value =" display "onclick =" f2 () "/> <input type =" button "value =" Switch effect "onclick =" f3 () "/> </body>
3. fade in and fade out
Allows elements to be displayed and hidden by changing the transparency.
<Script type = "text/javascript"> function f1 () {// hide $ ("div "). fadeOut (4000);} function f2 () {// display $ ("div "). fadeIn (4000); $ ("# two "). fadeTo (2000, 0.3);} function f3 () {$ ("div "). fadeToggle (2000) ;}</script> <style type = "text/css"> div {width: 300px; height: 200px; background-color: blue ;} </style> <body> <div id = "two"> duck and dog </div> <input type = "button" value = "hide" onclick = "f1 () "/> <input type =" button "value =" display "onclick =" f2 () "/> <input type =" button "value =" Switch effect "onclick =" f3 () "/> </body>
Set the transparency. The transparency of the div is 30%:
4. animation effect underlying method animate ()
The animation effects, such as show () hide (), are internally implemented using the animation () method.
$ (). Animate (css effect parameter [, time] [, callback function]);
Css () and other general jquery methods will return the current jquery object after execution, so many jquery methods can be called in a chain.
<Script type = "text/javascript"> function f1 () {// text size, bold text, div width and height // font-size background-color console. log ($ ("div"); // After the jquery object is called, the css method itself is still a jquery object. // The return this keyword console exists after the css method is executed. log ($ ("div" ).css('font-weight', 'bold').css ("background-color", 'pink '); var jn = {'font-size': '30px', width: '400px ', height: '300px'}; $ ("div" ).css ('font-weight ', "bold" ..css ("background-color ", "pink" ).css ("color", "white "). animate (jn, 2000); // $ ("div "). animate (jn, 2000) ;}</script> <style type = "text/css"> div {width: 300px; height: 200px; background-color: blue ;} </style> <body> <div> duck and dog </div> <input type = "button" value = "set" onclick = "f1 () "/> </body>
5. accumulative and progressive Animation
If left: 500 is set for an animation at one time, the first click of the div will move 500 pixels left, and the second click will not move. Accumulative and progressive Subtraction is continuous. You only need to change left: "500px" to left: "+ = 500px" or left: "-= 500px.
(function(){ $("#panel").click(function(){ $(this).animate({left: "+=500px"}, 3000); }) })</span>
6. Multiple animations
1. Execute multiple animations at the same time
The above example only controls the change of the left attribute. This time, when we control the left attribute, the element height is changed to 200px.
$(function(){ $("#panel").click(function(){ $(this).animate({left: "500px",height:"200px"}, 3000); }) })
2. Sequential animation execution
In the preceding example, the Right-shift and zoom-in height of an element are both animated. Now we need to first shift right and then enlarge the height. It's very easy to do. Just split the above animate () method into two.
$(function(){ $("#panel").click(function(){ $(this).animate({left: "500px"},3000) .animate({height:"200px"},1000); }) })
3. Integrated Animation
Next we will complete more complex animations. Click the div element, move it to the right, increase its height, and change its opacity from 50% to 100%. Then let it move from top to bottom, and its width increases.
And hide it in fade-out mode.
$ (Function () {$ ("# panel" ).css ("opacity", 0.5); // Set opacity $ ("# panel "). click (function () {$ (this ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000 ). animate ({top: "200px", width: "200px"}, 3000 ). fadeOut (1000 );})})
7. animation callback function
In the above example, if you want to switch the css style in the last step instead of hiding the element. In this case, we can use the third parameter callback function of animate.
$ (Function () {$ ("# panel" ).css ("opacity", 0.5); // Set opacity $ ("# panel "). click (function () {$ (this ). animate ({left: "400px", height: "200px", opacity: "1"}, 3000 ). animate ({top: "200px", width: "200px", function({{}(this}.css ("border", "5px solid blue ")});})})
In this way, the css method is added to the animation queue.
8. Stop the animation and determine whether the animation is in the animation state.
1. Stop the animation of the element.
Stop ([clearQueue] [, gotoEnd]) both are optional parameters and are boolean
Parameter description:
ClearQueue: Indicates whether to clear the animation queue that has not been completed
GotoEnd: Indicates whether an animation is being executed to the final state.
A comprehensive example shows the two parameters of the stop () method:
<Style type = "text/css"> * {margin: 0; padding: 0;} body {font-size: 13px; line-height: 130%; padding: 60px} # panel {width: 60px; border: 1px solid #0050D0; height: 22px; overflow: hidden ;}. head {padding: 5px; background: #96E555; cursor: pointer; width: 300px ;}. content {padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0; display: block; width: 280px ;} </style> <script src = ".. /.. /.. /scripts/jquery. js "type =" text/javascript "> </script> <script type =" text/javascript ">$ (function () {$ (" button: eq (0) "). click (function () {$ ("# panel "). animate ({height: "150"}, 2000 ). animate ({width: "300"}, 2000 ). hide (3000 ). animate ({height: "show", width: "show", opacity: "show"}, 2000 ). animate ({height: "500"}, 2000) ;}); $ ("button: eq (1 )"). click (function () {$ ("# panel "). stop (); // stop the current animation and continue the next animation}); $ ("button: eq (2 )"). click (function () {$ ("# panel "). stop (true); // clear all animations of an element}); $ ("button: eq (3 )"). click (function () {$ ("# panel "). stop (false, true); // get the current animation to its final state and continue the next animation}); $ ("button: eq (4 )"). click (function () {$ ("# panel "). stop (true, true); // clear all animations of the element so that the current animation reaches the final state });}) </script> <body> <button> start a series of animations </button> <button> stop () </button> <button> stop (true) </button> <button> stop (false, true) </button> <button> stop (true, true) </button> <div id = "panel">
2. determine whether an element is animated.
When using the animate () method, avoid the inconsistency between animations and users' Behaviors Caused by animation accumulation. An animation accumulation occurs when you quickly execute an animation () on an element.
The solution is to determine whether the element is in the animation state. When the element is not in the animation state, a new animation is added to the element.
Usage:
If (! $ (Element). is (": animated") {// Add a new animation}
Through a detailed analysis of the eight jquery animation effects, I hope you will like this article to fully introduce the jquery animation effects.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
