JQuery learning tour Item9 animation effect

JQuery learning tour Item9 animation effect
1. display and hide of elements: display: none; hide display: block; display

Simple display and Hiding Methods

A) show () show B) hide () hide c) toggle () switch, hide when displayed, and hide when hidden

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

duck and dog

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:

When hiding an element, the visibility attribute also saves the influence of the element in the Document Stream. After hiding the element, the unknown element remains unchanged. This attribute includes the visible (default) and hidden values. After the display is hidden, hidden elements no longer occupy the location of the document. 2. the slide effect shows and hides the slideUp (speed [, callback]) sliding up element and finally hides the slideDown (speed [, callback]) element and finally displays the slideToggle (speed [, callback])
Speed: Set the speed (slow (600) normal (400) fast (200) Time (millisecond) callback: the callback function automatically called after the effect 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 slide effect // setInterval (f3 (), 1000) ;}); </script>

duck and dog 3. fade in and fade out

Allows elements to be displayed and hidden by changing the transparency.

FadeIn (speed, [callback]) fadeOut (speed, [callback]) fadeToggle (speed, [callback]) Switch effect fadeTo (speed, opacity, [callback]) set div to a certain degree of transparency (0-1) 0.3 is 30% 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>

duck and dog

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. // It indicates that the return this keyword console.log((div).css ('font-weight', 'bold').css (background-color, 'Pink '); var jn = {'font-size': '30px', width: '400px ', height: '300px'}; trim (color, white ). animate (jn, 2000); // $ (div ). animate (jn, 2000) ;}</script>

duck and dog 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);      })  })  

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 () {opacity (+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 () {opacity (+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,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 unfinished animation queue gotoEnd: Indicates whether to move the animation being executed to the final state.

A comprehensive example shows the two parameters of the stop () method:

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

Start a series of animationsStop ()Stop (true)Stop (false, true)Stop (true, true) Three Kingdoms Xia houyao's eyes, Lu Xun's joint venture, and Guo jiassima's Deep Foundation

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}