jQuery的動畫以及擴展功能_ZenDei技術網路在線

動畫DOM及CSS操作自定義動畫 animate(最終css狀態，時間) 這個最終css狀態是一個對象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <style> div{ w ...

動畫DOM及CSS操作

自定義動畫 animate(最終css狀態，時間)

這個最終css狀態是一個對象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).animate({
                    "opacity":.3,
                    "width":"300px",
                    "height":300
                },3000);
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

第二個參數可以給動畫設置時間，有個問題是當滑鼠快速觸發事件時，動畫由於時長的原因會出現延遲的效果

因此需要保證在下一次動畫執行時，先立刻停止上一次未完成的動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).stop().animate({
                    "opacity":.3,
                    "width":"300px",
                    "height":300
                },1000);
            });
            $("div").mouseout(function(){
                $(this).stop().animate({
                    "opacity":1,
                    "width":"200px",
                    "height":200
                },1000);
            })
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

.delay(時間) 方法可以實現動畫的暫停

以下效果實現延遲1s後再進行下一次動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).stop().animate({
                    "opacity":.3,
                    "width":"300px",
                    "height":300
                },1000).delay(1000).animate({
                    "opacity":.3,
                    "width":"400px",
                    "height":"400px"
                });
            });
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

動畫函數

.show() 顯示

.hode() 隱藏

傳入時間時會產生動畫效果，是通過改變元素的寬高和透明度來進行動畫

參數有：具體的時間、slow、normal、fast

.toggle() 根據當前狀態決定是show還是hide

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).stop().hide("slow").show("fast");
                $(this).stop().toggle(1000);
            });
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

.fadeIn() 淡入

.fadeOut() 淡出

通過更改元素的透明度來實現，不會改變元素的寬高

.fadeToggle() 根據元素的狀態來判斷是顯示還是隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).stop().fadeOut("slow").fadeIn("fast");
            });
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

.slideDown() 垂直方向顯示

.slideUp() 垂直方向隱藏

在垂直方向上改變元素的高度

.slideToggle() 根據當前狀態決定是顯示還是隱藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("div").mouseover(function(){
                $(this).stop().slideUp().slideDown();
            });
        })
    </script>
</head>
<body>
    <div></div>
</body>
</html>

計時器

.setTimeout(fn, time) 延遲

當函數內部使用計時器調用自身時，可以起到迴圈的效果

可以使用clearTimeout() 清空計時器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            var timer=null;
            
            function fn(){
                $("div").stop().slideUp().slideDown();
                timer=setTimeout(fn,1000);//開始計時器
            }
            fn();

            $("button").click(function(){
                clearTimeout(timer);//清空計時器
            });
        });
    </script>
</head>
<body>
    <button>停止</button>
    <div></div>
</body>
</html>

.setInterval(fn, time) 每隔一定時間執行一次

有個缺陷：不會立刻執行，而是會等待1秒鐘

.clearInterval() 清空迴圈

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    div{
        width:200px;
        height:200px;
        background:pink;
    }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            var timer=null;
            
            function fn(){
                $("div").stop().slideUp().slideDown();
            }
            timer=setInterval(fn,1000);//開始迴圈

            $("button").click(function(){
                clearInterval(timer);//停止迴圈
            });
        });
    </script>
</head>
<body>
    <button>停止</button>
    <div></div>
</body>
</html>

最後是之前的輪播圖項目改進

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <link rel="stylesheet" href="style.css">
    <script src="jquery.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <span class="top"></span>
    <nav>
        <a href="#">banner1</a>
        <a href="#">banner2</a>
        <a href="#">banner3</a>
        <a href="#">banner4</a>
    </nav>
    <div class="img-box">
        <img src="image/cat1.jpg">
        <img src="image/cat2.jpg">
        <img src="image/cat3.jpg">
        <img src="image/cat4.jpg">
    </div>
</body>
</html>

style.css

* { margin: 0; padding: 0; border: none; }
html, body { overflow: hidden;/*解決因為盒模型溢出造成的垂直方向滾動條*/ height: 100%; background-color: rgb(145, 176, 200); }
span.top { display: block; width: 16px; height: 16px; margin: 30px auto 40px; border-radius: 50%; background-color: #fff; }
nav { position: relative; display: flex;/*彈性盒模型*/ width: 40%; margin: 0 auto 45px; justify-content: space-between;/*實現元素在容器內左右均勻分佈*/ }
nav:before { position: absolute; top: 20px; display: block; width: 100%; height: 10px; content: '';/*激活偽元素*/ background-color: #fff; }
nav > a { font-size: 14px; position: relative;    /*預設是static定位，會被絕對定位覆蓋 修改為相對定位之後，會覆蓋前面的元素*/ padding: 10px 20px; text-decoration: none; color: rgb(144, 146, 152); border: 2px solid rgb(144, 146, 152); background-color: #fff; }
.img-box { position: relative; overflow: hidden; width: 250px; height: 250px; margin: 0 auto; background-color: #fff; box-shadow: 0 0 30px 0 rgba(144, 146, 152, .3); }
.img-box img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 98%; margin: auto;/*以上5句實現絕對定位的居中*/ }
/*# sourceMappingURL=style.css.map */

script.js

$(function(){
    var index=$("a").length-1;

    //綁定多個事件
    $("a").add(document).on({
        click:function(event){
            event.stopPropagation();//阻止冒泡
            index=$(this).index(); // 獲取當前點擊的a的index
            swiper();
        },
        mouseenter:function(event){
            event.stopPropagation();//阻止冒泡
            console.log($(this)[0].nodeName);//當前對象的標簽名
            if($(this)[0].nodeName=="A"){
                index=$(this).index(); // 獲取當前點擊的a的index
            }else{
                return true;
            }
            swiper();
        },
        keydown:function(event){
            if(event.keyCode==37){//左
                index=index>0 ? --index : $("a").length-1;
            }else if(event.keyCode==39){//右
                index=index<$("a").length-1 ? ++index : 0;
            }else{
                return true;
            }
            swiper();
        }
    });

    var swiper=function(){
        $("img").eq(index) 
                .stop().fadeIn(1000)