自定義動畫animate()

時間 2019-11-24

標籤自定義動畫 animate 简体版

原文原文鏈接

在上一節總結了一下3中類型的動畫，其中show()和hide()方法會同時修改元素的多個屬性，fadeOut()和fadeIn()方法只會修改元素的不透明度，而slideDown()和slideUp()方法只會改變元素的高度，可是不少狀況下，須要對動畫有更多控制，這些方法沒法知足用戶的需求，這時，jQuery中的自定義動畫animate()就能夠用來解決這些高級的動畫問題了。javascript

1，語法結構

首先來看一下該方法的語法結構：animate(params,speed,callback)css

params：一個包含樣式屬性及值的映射
speed：速度參數，可選
callback：在動畫完成時執行的函數，可選,

在開始操做前，先在html中新建一個div元素，具體以下，接下的全部操做均在此基礎上進行。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.3.1.js"></script>
    <style type="text/css">
        #box1 {
            position:relative;
            width:100px;
            height:100px;
            border:1px solid #0050d0;
            background-color: #96e555;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
</body>
</html>

2，自定義簡單動畫

animate()也能夠像前面的方法那樣，讓元素動起來，並且動畫效果能夠更加精緻新穎。java

首先要實現的是鼠標懸浮時元素向右移動。jquery

<script type="text/javascript">
　　$(function(){
    　　$("#box1").hover(function(){
       　　 $(this).animate({left:"100px"},3000);
   　　 })
　　})
</script>

上面的代碼能實現鼠標懸浮時，元素移動到距離左邊100px出的位置，移動時間用時3000毫秒。ide

<script type="text/javascript">
$(function(){
    $("#box1").hover(function(){
        $(this).animate({left:"+=100px"},3000);
    })
})
</script>

這段代碼也是讓元素移動，不一樣的是，這段代碼是讓元素在當前的位置上進行累加的，即繼續向右移動100px,而上面的代碼則與當前位置無關，直接將元素移動到距離左邊100px處。函數

3，多重動畫

就是執行多個動畫，好比讓元素既能向右滑動，又能放大元素。動畫

<script type="text/javascript">
$(function(){
    $("#box1").hover(function(){
        $(this).animate({left:"200px",height:"200px"},3000);
    })
})
</script>

上面這段代碼能同時實現兩個效果，讓元素的向右移動和高度增長同時發生，用時均爲3000毫秒。this

<script type="text/javascript">
$(function(){
    $("#box1").hover(function(){
        $(this).animate({left:"200px"},3000);
        $(this).animate({height:"200px"},3000);
    })
})
</script>

上面這段代碼也能實現兩個效果，可是兩個效果是分開執行，前3000毫秒用來實現向右移動，移動結束後，後3000毫秒用來實現高度增長。上面的兩個動畫均是對同一個對象進行操做，所以能夠採用鏈式的寫法：spa

<script type="text/javascript">
$(function(){
    $("#box1").hover(function(){
        $(this).animate({left:"200px"},3000)
               .animate({height:"200px"},3000);
    })
})
</script>

向這種動畫的執行效果具備前後順序，稱爲「動畫隊列」。

4，綜合動畫

接下來要完成更復雜的動畫，鼠標懸浮的時候，讓元素向右移動的同時增大它的高度，並將它的透明度從50%變換到100%，而後再讓它從上到下移動，同時它的寬度變大，當完成這些效果後，讓它以淡出的方式隱藏。

<script type="text/javascript">
$(function(){
    $("#box1").css("opacity","0.5")
    $("#box1").hover(function(){
        $(this).animate({left:"200px",height:"200px",opacity:'1'},3000)
               .animate({top:"200px",width:"200px"},3000)
               .fadeOut("slow");
    })
})
</script>

上面的效果能夠分解爲3步，第一步是在前3000毫秒同時實現右移動，高度增長和透明度變化，第二步是在第二個3000毫秒同時實現向下移動和寬度增長，第三步實現淡出隱藏，並經過鏈式的方式將這三步進行排隊依次執行。

5，動畫回調函數

若是，咱們想在上面的綜合動畫中，將元素的淡出隱藏改成切換元素的css樣式，若是咱們繼續採用上面的方法，是不能獲得理想的效果的。

<script type="text/javascript">
$(function(){
    $("#box1").css("opacity","0.5")
    $("#box1").hover(function(){
        $(this).animate({left:"200px",height:"200px",opacity:'1'},3000)
               .animate({top:"200px",width:"200px"},3000)
               .css("border","5px solid blue");
    })
})
</script>

雖然咱們的css寫在了最後面，預期在動畫的最後一步改變元素樣式，但實際狀況是，剛開始執行動畫的時候，最後的css()方法就被執行，這是由於css()並非animate()，不會被加到動畫隊列中，而是當即執行，此時，若是咱們想要達到預期的效果，但是使用回調函數對非動畫方法實現排隊。

<script type="text/javascript">
$(function(){
    $("#box1").css("opacity","0.5")
    $("#box1").hover(function(){
        $(this).animate({left:"200px",height:"200px",opacity:'1'},3000)
               .animate({top:"200px",width:"200px"},3000,function(){
                   $(this).css("border","5px solid blue");
               })
    })
})
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。