Animations in jquery

Question: Queue () method?

Tip0:

jquery does not support the toggle () method from above version 1.9.

//     $ ("#panel h5.head").  Toggle(function () {//     ... //     },function () {/     ///    });

The above does not support! The following support

//     $ ("#panel h5.head"). Click (function () {//        $ (this). Next () . Toggle(); //     });

tip1:

Animating with jquery is required in standard mode, otherwise it may cause animation jitter. The standard mode requires that the file header contain the following DTD definition:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

TIP2:

Any animation effect in jquery can be specified in 3 speed parameters "slow", "normal", "fast" time is "0.6 seconds" 0.4 seconds "" "0.2 seconds", when using the speed keyword with quotation marks, such as show ("Slow"), If you use numbers, you do not need quotes, such as show (1000), or (1000 milliseconds) for 1 seconds.

TIP3:

The callback callback function applies to all of the jquery animation effects methods, such as

    $ ("#element"). Slidedown ("normal",function() {        // do other things after the effect is complete    })

TIP4:

Determine if you are in an animated state

   if (!$ ("#element"). Is (": animated")) {//        Add new animation if not currently animated   }  

TIP5:

(1) animation effect on a set of elements

When multiple properties are applied in a animate () method, the animation occurs at the same time.

When the animation method is applied as a chain, the animation occurs sequentially (unless the queue option value is False)

(2) animation effects on multiple sets of elements

By default, animations occur at the same time.

When animation is applied in the form of a callback, including the callback function of the animation and the callback function of the queue () method, the animation occurs in the order of the callback

Note: In the animation method, other non-animated methods will queue up, such as the CSS () method to make non-animated methods also executed sequentially, you need to write these methods in the animation method's callback function or the queue () method.

This method of judging is often used in animate () animations and requires special attention. Animations that prevent animation from accumulating are inconsistent with the user's behavior.

1. Show () and Hide ()

① Note the Hide () method remembers the original display property value before setting the Display property value of content to none. When the show () method is called, the element is displayed according to the display property value that is remembered by the Hide () method.

③ also changes the height, width, and opacity of the content.

$ ("#panel h5.head"). Toggle (function() {     $ (this). Next (). Hide (+);  function() {     $ (this). Next (). Show (+);}) 

2, FadeIn () and fadeout ()

Changes the opacity of the element only.

3, Slideup () and Slidedown ()

Only the height of the element is changed.

4. Animate () Custom Animation

#panel {    position: relative;     width:100px;     height: 100px;     Border: 1px solid #0050d0;     background:#96e555;     cursor: pointer;}

Note: Define Relative

① Simple Animations

$ ("#panel"). Click (function() {    $ (this). Animate ({left: "500px"},300);}) 

② accumulation, exhaustion

$ ("#panel"). Click (function() {        $ (this). Animate ({left: "+=500px"},300);    }) 

③ Multiple animations

$ ("#panel"). Click (function() {        $ (). Animate ({left: "500px", Height: "200px"},300 );    })

④ sequential Execution (recommended chaining)

    $ ("#panel"). Click (function() {//        $ (this). Animate ({left: "500px"},300); //         $ (this). Animate ({height: "200px"},3000);        $ (this). Animate ({left: "500px"},300)                . Animate ({height:"200px"},3000);    })

⑤ Integrated Animation

$ ("#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 ("slow");//③//. CSS ("Border", "5px solid Blue");//④//③ is executed after ② (only the animation is added to the queue), but if the ④,css () method is instead added to the animation queue, it is executed immediately. //you want the CSS () to join the queue, just use the callback function. //. Animate ({top: "200px", Width: "200px"},3000,function () {//$ (this). CSS ("Border", "5px solid Blue");//                })})

5. Stop () stops the animation

Stop ([Clearqueue],[gotoend])

Note: The two parameter is a Boolean value (Ture or false). Clearqueue represents whether to empty an unfinished animation queue, Gotoend represents whether the animation being executed jumps to the end state.

If you use the Stop () method directly, the animation that is currently in progress is stopped immediately, and the next animation starts in the current state if there is another animation waiting to continue.

$ ("#panel"). Hover (function(){       $( This). Stop (). Animate ({height:"150"},2000)//① If the cursor removal event is triggered at this time. Stop () is immediately stopped ① execution ②③④;stop (true) is immediately stopped ① emptying ② execution ③④           //Stop (false,true) is immediately jumping to the end state of ① and executing ②③④;stop (true,true) is immediately jumping to the end state of ① emptying ② execution ③④. Animate ({width: "300"},3000);//②},function(){       $( This). Stop (). Animate ({height:"22"},2000)//③. Animate ({width: "60"},3000);//④})

Note: jquery can only set the final state of the animation that is being performed , and does not provide a way to reach the final state of the animation queue without being executed directly.

6, Delay () delayed animation

    $ ("#panel"). CSS ("opacity", "0.5");    $ ("#panel"). Click (function() {        $ (). Animate ({left: "400px", Height: "200px" , opacity: "1"},3000)//①                // after execution ① wait for 1s to execute ②                //②                 // ② wait for 2s to execute ③                //③    } after executing

7. Other animation methods

Toggle (Speed,[callback]);

Slidetoggle (Speed,[easing],[callback]); Change height

Fadetoggle (Speed,[easing],[callback]); Change transparency

FadeTo (Speed,opacity,[callback]);

$ ("#panel h5.head"). Click (function(){        $( This). Next (). Toggle (); });//equivalent//$ ("#panel h5.head"). Toggle (function () {//$ (this). Next (). Hide ();//},function () {//$ (this). Next (). Show ();//    });$ ("#panel h5.head"). Click (function(){        $( This). Next (). Slidetoggle (); });//equivalent//$ ("#panel h5.head"). Toggle (function () {//$ (this). Next (). Slideup ();//},function () {//$ (this). Next (). Slidedown ();//    });$ ("#panel h5.head"). Click (function(){        $( This). Next (). Fadetoggle (); });//equivalent//$ ("#panel h5.head"). Toggle (function () {//$ (this). Next (). FadeOut ();//},function () {//$ (this). Next (). FadeIn ();//    });$ ("#panel h5.head"). Click (function(){        $( This). Next (). FadeTo (600,0.2); })

Animations in jquery