jQueryの - アニメーション - コードワールド

jQueryのアニメーションは、3つの部分に分け

内蔵のアニメーションjqueryの
jqueryの非組み込みアニメーション
jqueryのアニメーションの設定

内蔵のアニメーションjqueryの

非表示表示

jQueryの中に隠すことができます（）とshow（）メソッドは非表示と表示HTML要素、および使用してトグル（）メソッドがhide（）およびshow（）メソッドを切り替えることができます。

ミリ秒単位でアニメーションの期間ブラケット、

ブラケットには、コールバック関数を追加することができます

    // 非表示のdiv 
    。$（ "＃のBTN1"）をクリックします（関数（）{ 
        $（ "#box"）非表示（1000 ）; 
    }）
    // 表示のdiv 
    $（ "＃のBTN2"）をクリックします（。関数（） { 
        $（ "#box"）ショー（1000 ）; 
    }）
    // 表示/非表示のdiv 
    $（ "＃のbtn3"）をクリックします（関数（）{ 
        $（ "#box"）トグル（1000 ）; 
    } ）

結果は以下の通りであります：

非表示表示

jqueryのアニメーションもサポートを一緒に入れ

// それから1秒後に隠された継続的なアニメーション、2Sディスプレイ、黄色に背景色を変更する 
$（ "＃のBTN1"）。クリックして（関数（）{ 
        $（ "#box"）。（1000隠す）.SHOW（2000年、機能（）{ 
            $（ "#box"）。CSS（ "バックグラウンド"、 "黄" ）
        }）
    }）

結果は以下の通りであります：

組み立てます

プルダウンおよびプルアップ

方法jQueryのスライド要素が上下にスライドすることができます。

slideDown（）;
上にスライドします（）;
slideToggle（）;

// 上拉 
    。$（ "＃のBTN1"）をクリックします（関数（）{ 
        $（ "#box"）slideUp（1000 ）;   
    }）
    // 下拉 
    。$（ "＃のBTN2"）をクリックします（関数（）{ 
        $（ "#box"）slideDown（1000 ）; 
    }）
    // 上拉/下拉 
    $（ "＃のbtn3"）をクリックします（関数（）{ 
        $（ "#box"）slideToggle（1000 ）; 
    }）

結果は以下の通りであります：

ダウン引き上げ

フェード

以下のように、4つのフェードに実装される方法をそれらをJQ：

フェードイン（）隠し要素をフェードアウト
フェードアウト（）目に見える要素をフェード
fadeToggle（）フェードエフェクトスイッチャー
所定の階調透明度パラメータにfadeTo（）：速度、不透明度（0-1）、コールバック

    // 淡出 
    $（ "＃のBTN1"）をクリックします（。関数（）{ 
        $（ "#box"）フェードアウト（1000 ）; 
    }）
    // 淡入 
    。$（ "＃のBTN2"）をクリックします（関数（）{ 
        $ （ "#box"）フェードイン（1000 ）;   
    }）
    // 淡入/淡出 
    $（ "＃のbtn3"）（クリック機能（）{ 
        $（ "#box" ）.fadeToggle（）; 
    }）
    // 透明度0.5 
    $（ "＃1 btn4"）をクリック（関数（）{ 
        $（ "#box"）fadeTo（1000,0.5。）; 
    }）

結果は以下の通りであります：

フェード

jQueryの非組み込みアニメーション

次のように（）アニメーションアニメーションを介して達成することができるJQは、構文は次のとおりです。

$（セレクタ）.animate（{paramsは}、速度、コールバック）。

// 右方向200pxの 
。$（ "＃BTN"）をクリックします（関数（）{ 
        $（ "黒四角" ）.animateは、（{ 
            左： 200です
        ）}     
    }）

結果は以下の通りであります：

アニメーション

アニメーションアニメーションは、連続セットすることができ

$（ "＃1 BTN"）をクリック（関数（）{ 
        $（ "■は" ）.animate（{ 
            左： 200 
        。}）アニメーション（{ 
            トップ： 200 
        。}）アニメーション（{ 
            左： 0 
        }）アニメート（{ 
            トップ： 0 
        }）     
    }）

結果は以下の通りであります：

アニメーション

例えば、アニメーションを組み合わせてアニメーションの様々なを達成することができます：収縮に対するDIV権利を

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

效果如下:

アニメーション

停止动画

我们可以通过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);
    })

效果如下

アニメーション

使用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>の2つのメニュー</ LI> 
            </ul>
        </ LI> 
    </ UL> 
</ BODY> 
<SCRIPT SRC = "../ jquery.js "> </ SCRIPT> 
<SCRIPT> 


    $（ " .navを"）。子供（ "LI"）。のmouseOver（関数（）{ 
        $（この）.children（ "UL"）。STOP（）。ショー（500 ）
        .parent（）。SIBLINGS（）。子供（以下"UL"）。STOP （）.hide（500 ）; 
    }）

    // ムービーが開く前に、停止
    // タイマーがオンにされる前に、最初の削除

    // .parent（）親要素セレクタ
    // .siblingsを（）現在のすべてのピア（に加えて兄

）</ SCRIPT> 
</ HTML>

コードの表示

結果は以下の通りであります：