jQuery - animation - Code World

jQuery animations divided into three parts

Built-in animation jquery
jquery non-built animation
jquery animation settings

Built-in animation jquery

Hide Show

Can hide () and show () method in jQuery to hide and display HTML elements, and using Toggle () method can be switched hide () and show () method.

Brackets for the duration of the animation, in milliseconds

Brackets can also add a callback function

    // hide div 
    $ ( "# btn1") the Click. ( Function () { 
        $ ( "#box") hide (1000. ); 
    }) 
    // display div 
    $ ( "# btn2") the Click (. Function () { 
        $ ( "#box") Show (1000. ); 
    }) 
    // Hide / Show div 
    $ ( "# btn3") the Click (. function () { 
        $ ( "#box") Toggle (1000. ); 
    } )

Results are as follows:

Hide Show

jquery animation also put together support

// continued animation, hidden after 1s, 2s display, then change the background color to yellow 
$ ( "# btn1"). The Click ( function () { 
        $ ( "#box"). Hide (1000) .Show (2000, function () { 
            $ ( "#box"). CSS ( "background", "Yellow" ) 
        }) 
    })

Results are as follows:

put together

Pull-down and pull-up

Method jQuery sliding element can slide up and down.

slideDown();
slideUp();
slideToggle();

//上拉
    $("#btn1").click(function(){
        $("#box").slideUp(1000);  
    })
    //下拉
    $("#btn2").click(function(){
        $("#box").slideDown(1000);
    })
    //上拉/下拉
    $("#btn3").click(function(){
        $("#box").slideToggle(1000);
    })

Results are as follows:

Pull up down

fade in and fade out

jq them, four fade-implemented method, as follows:

fadeIn () fade hidden element
fadeOut () fade visible elements
fadeToggle () fade effects switcher
fadeTo () to given gradation transparency parameter: speed, opacity (0-1), callback

    //淡出
    $("#btn1").click(function(){
        $("#box").fadeOut(1000);
    })
    //淡入
    $("#btn2").click(function(){
        $("#box").fadeIn(1000);  
    })
    //淡入/淡出
    $("#btn3").click(function(){
        $("#box").fadeToggle();
    })
    //透明度0.5
    $("#btn4").click(function(){
        $("#box").fadeTo(1000,0.5);
    })

Results are as follows:

fade in and fade out

jQuery non-built animations

jq which may () be achieved through animation animate, syntax is as follows:

$(selector).animate({params},speed,callback);

// rightward 200px 
$ ( "BTN #") the Click. ( Function () { 
        $ ( ".box" ) .animate ({ 
            left: 200 is 
        })     
    })

Results are as follows:

Animation

animate animation can also be a continuous set

$("#btn").click(function(){
        $(".box").animate({
            left:200
        }).animate({
            top:200
        }).animate({
            left:0
        }).animate({
            top:0
        })    
    })

Results are as follows:

Animation

Can achieve a variety of animation through a combination of animation, for example: div right on contraction

$(".box").animate({
            width:0,
            height:0,
            left:100,
            top:0
        })

效果如下:

Animation

停止动画

我们可以通过stop()方法停止动画。

语法如下:

 $(selector).stop(stopAll,goToEnd);

jQuery stop() 方法用于----在动画完成之前停止动画或效果。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

stop():两个参数，都是布尔值，默认为false

动画队列:false：不操作；true：清空了
当前动画:false：立即停止；true：立即到终点

默认地，stop() 会清除在被选元素上指定的当前动画。

$("#btn").click(function(){
        $(".box").animate({
            left:200
        },2000).animate({
            top:200
        },2000).animate({
            left:0
        },2000).animate({
            top:0
        },2000)
    })
    $("#btn2").click(function(){
        $(".box").stop(false,true);
    })

效果如下

Animation

使用jquery实现二级菜单doem

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        ul ul{display: none}
    
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <span>一级菜单</span>
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <span>一级菜单</span>
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <span>一级菜单</span>
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
            </ul>
        </li>
        <li>
            <span>一级菜单</span>
            <ul>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li>二级菜单</li>
                <li> two menu </ Li>
            </ul>
        </ Li> 
    </ UL> 
</ body> 
<Script the src = "../ jquery.js"> </ Script> 
<Script> 


    $ ( ".nav"). Children ( "Li"). mouseOver ( function () { 
        $ ( the this ..) .children ( "UL") STOP () Show (500 ) 
        . .parent () SIBLINGS () Children (. "UL") STOP () hide (500.. ); 
    }) 

    // before the animation is turned on, stop 
    // before the timer is turned on, first remove 

    // .parent () parent element selector 
    // .siblings () in addition to all current sibling (brother)
 
</ Script> 
</ HTML>

View Code

Results are as follows: