jquery動(dòng)畫(huà)

動(dòng)畫(huà)顯示和隱藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動(dòng)畫(huà)
            $("button:eq(0)").click(function () {
//                //顯示動(dòng)畫(huà)用法1:   show();   不加參數(shù)
                $("div").show();  //通過(guò)這個(gè)方法實(shí)現(xiàn)的：display: block;

//                //顯示動(dòng)畫(huà)用法2:   show(2000);   毫秒值
//                $("div").show(2000);  //通過(guò)這個(gè)方法實(shí)現(xiàn)的：display: block;
//                //通過(guò)控制  寬高透明度和display

                //顯示動(dòng)畫(huà)用法3:   show(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").show("slow");
//                $("div").show("fast");
//                $("div").show("normal");

                //顯示動(dòng)畫(huà)用法1:   show(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").show(5000,function () {
//                    alert("動(dòng)畫(huà)執(zhí)行完畢！");
//                });
            })

            //隱藏動(dòng)畫(huà)
            $("button:eq(1)").click(function () {
//                //顯示動(dòng)畫(huà)用法1:   hide();   不加參數(shù)
                $("div").hide();  //通過(guò)這個(gè)方法實(shí)現(xiàn)的：display: none;

//                //顯示動(dòng)畫(huà)用法2:   hide(2000);   毫秒值
//                $("div").hide(2000);  //通過(guò)這個(gè)方法實(shí)現(xiàn)的：display: none;
//                //通過(guò)控制  寬高透明度和display

                //顯示動(dòng)畫(huà)用法3:   hide(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").hide("slow");
//                $("div").hide("fast");
//                $("div").hide("normal");

                //顯示動(dòng)畫(huà)用法4:   hide(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").hide(2000,function () {
//                    alert("動(dòng)畫(huà)執(zhí)行完畢！");
//                });
            })

            $("button:eq(2)").click(function () {
                //顯示隱藏切換
                //同樣有四種用法
                $("div").toggle(2000);
            })
        })
    </script>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<button>切換</button>
<div></div>

</body>
</html>

動(dòng)畫(huà)滑入和滑出

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動(dòng)畫(huà)
            $("button:eq(0)").click(function () {
//                //滑入動(dòng)畫(huà)用法1:   slideDown();   不加參數(shù)
                $("div").slideDown();

//                //滑入動(dòng)畫(huà)用法2:   slideDown(2000);   毫秒值
//                $("div").slideDown(2000);
//                //通過(guò)控制  高和display

                //滑入動(dòng)畫(huà)用法3:   slideDown(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").slideDown("slow");
//                $("div").slideDown("fast");
//                $("div").slideDown("normal");

                //滑入動(dòng)畫(huà)用法4:   slideDown(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").slideDown(5000,function () {
//                    alert("動(dòng)畫(huà)執(zhí)行完畢！");
//                });
            })

            //滑出動(dòng)畫(huà)
            $("button:eq(1)").click(function () {
//                //滑出動(dòng)畫(huà)用法1:   slideUp();   不加參數(shù)
//                $("div").slideUp();

//                //滑出動(dòng)畫(huà)用法2:   slideUp(2000);   毫秒值
//                $("div").slideUp(2000);  //通過(guò)這個(gè)方法實(shí)現(xiàn)的：display: none;
//                //通過(guò)控制  高和display

                //滑出動(dòng)畫(huà)用法3:   slideUp(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").slideUp("slow");
//                $("div").slideUp("fast");
//                $("div").slideUp("normal");

                //滑出動(dòng)畫(huà)用法1:   slideUp(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
                $("div").slideUp(2000,function () {
                    alert("動(dòng)畫(huà)執(zhí)行完畢！");
                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //同樣有四種用法
                $("div").slideToggle(1000);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切換</button>
<div></div>

</body>
</html>

動(dòng)畫(huà)淡入和淡出

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            /*opacity: 1;*/
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動(dòng)畫(huà)
            $("button:eq(0)").click(function () {
//                //淡入動(dòng)畫(huà)用法1:   fadeIn();   不加參數(shù)
                $("div").fadeIn();

//                //淡入動(dòng)畫(huà)用法2:   fadeIn(2000);   毫秒值
//                $("div").fadeIn(2000);
//                //通過(guò)控制  透明度和display

                //淡入動(dòng)畫(huà)用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeIn("slow");
//                $("div").fadeIn("fast");
//                $("div").fadeIn("normal");

                //淡入動(dòng)畫(huà)用法4:   fadeIn(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").fadeIn(5000,function () {
//                    alert("動(dòng)畫(huà)執(zhí)行完畢！");
//                });
            })

            //滑出動(dòng)畫(huà)
            $("button:eq(1)").click(function () {
//                //滑出動(dòng)畫(huà)用法1:   fadeOut();   不加參數(shù)
//                $("div").fadeOut();

//                //滑出動(dòng)畫(huà)用法2:   fadeOut(2000);   毫秒值
//                $("div").fadeOut(2000);  //通過(guò)這個(gè)方法實(shí)現(xiàn)的：display: none;
//                //通過(guò)控制  透明度和display

                //滑出動(dòng)畫(huà)用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
//                $("div").fadeOut("slow");
//                $("div").fadeOut("fast");
//                $("div").fadeOut("normal");

                //滑出動(dòng)畫(huà)用法1:   fadeOut(毫秒值，回調(diào)函數(shù)[顯示完畢執(zhí)行什么]);
//                $("div").fadeOut(2000,function () {
//                    alert("動(dòng)畫(huà)執(zhí)行完畢！");
//                });
            })

            $("button:eq(2)").click(function () {
                //滑入滑出切換
                //同樣有四種用法
                $("div").fadeToggle(1000);
            })

            $("button:eq(3)").click(function () {
                //改透明度
                //同樣有四種用法
                $("div").fadeTo(1000,0.5, function () {
                    alert(1);
                });
            })
        })
    </script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切換</button>
<button>改透明度為0.5</button>
<div></div>

</body>
</html>

自定義動(dòng)畫(huà)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
//                var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
//                var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};
//
//                //自定義動(dòng)畫(huà)
//                $("div").animate(json,1000, function () {
//                    $("div").animate(json2,1000, function () {
//                        alert("動(dòng)畫(huà)執(zhí)行完畢！");
//                    });
//                });


//                //自定義動(dòng)畫(huà)
//                $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
//                $("div").animate({"height":0},2000);
//                $("div").animate({"opacity":0},2000);

            })
        })
    </script>
</head>
<body>
<button>動(dòng)畫(huà)</button>
<div></div>
</body>
</html>

動(dòng)畫(huà)停止

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 300px;
            height: 300px;
            display: none;
            background-color: pink;
        }
    </style>

    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //點(diǎn)擊按鈕后產(chǎn)生動(dòng)畫(huà)
            $("button:eq(0)").click(function () {
                $("div").slideDown(2000);
            })

            //滑出動(dòng)畫(huà)
            $("button:eq(1)").click(function () {
                $("div").slideUp(2000);
            })

            $("button:eq(2)").click(function () {
                $("div").stop();   //都不寫(xiě)，默認(rèn)兩個(gè)都是false;

                // 第一個(gè)參數(shù)表示后續(xù)動(dòng)畫(huà)是否要執(zhí)行
                //（true:后續(xù)動(dòng)畫(huà)不執(zhí)行  ;false:后續(xù)動(dòng)畫(huà)會(huì)執(zhí)行）
                // 第二個(gè)參數(shù)表示當(dāng)前動(dòng)畫(huà)是否執(zhí)行完
                //（true:立即執(zhí)行完成當(dāng)前動(dòng)畫(huà)  ;false:立即停止當(dāng)前動(dòng)畫(huà)）

                //四種情況：情況1：true,true
                //（后續(xù)動(dòng)畫(huà)不執(zhí)行，立即執(zhí)行完成當(dāng)前動(dòng)畫(huà)）
//                $("div").stop(true,true);

                //四種情況：情況2：false,true
                //（后續(xù)動(dòng)畫(huà)會(huì)執(zhí)行，立即執(zhí)行完成當(dāng)前動(dòng)畫(huà)）
//                $("div").stop(false,true);

                //四種情況：情況3：true,false
                //（后續(xù)動(dòng)畫(huà)不執(zhí)行，立即停止當(dāng)前動(dòng)畫(huà)`）
//                $("div").stop(true,false);

                //四種情況：情況4：true,false
                //（后續(xù)動(dòng)畫(huà)會(huì)執(zhí)行，立即停止當(dāng)前動(dòng)畫(huà)`）
//                $("div").stop(false,false);
            })
        })
    </script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>停止</button>
<div></div>

</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容