jquery的animate({})動畫整理

在網頁製做的過程當中少不了用到各類動畫，形式多種多樣，flash,css,js,canvas,等等都能實現，對於其優劣和效果只能說各有千秋。

什麼是動畫效果，其實網頁中的漸變效果就是一種很基礎的動畫，動畫的基礎是時間效果，在規定的時間內完成什麼效果。動畫最關鍵的一點仍是根據人類的視覺習慣而來，動的東西每每是心靈捕捉的對象。抓住用戶的眼光，以動畫爲基礎宣傳本身迫切想表達的而且美化豐富界面內容，也算是動畫的內涵了。

下面提到的是使用jQuery如何實現動畫效果，動畫的要素是動，move固然有須要對css的position屬性進行必定的瞭解。而後就是時間參數，時間是肯定動畫效果的基礎，而後就是運動軌跡，運動軌跡的肯定就來源於今天咱們學到的animate({})，不得不提的是jQ之因此盛行到今天仍是有不少可取的功能，不僅僅是對於選擇器的使用，其餘工具函數和動畫方法也很強大，基本上你能看到的網頁動畫效果它均可以幫助你實現。

下面先附上一個例子，寫的很簡單，新手製做有高手請斧正，謝謝！

html:

<p>點擊動畫</p>
<div class="ha">enheng</div>

css:

<style type="text/css">
p {
    background-color:rgba(240,210,210,1.00);
    width:70px;
    height:20px;
}
.ha {
    width:100px;
    height:100px;
    background-color:rgba(53,178,231,1.00);
    position:relative;
}
.cur {
    background-color:rgba(83,148,236,1.00);
}
.cur1  {
    background-color:rgba(37,213,23,1.00);
}
.cur2 {
    background-color:rgba(47,44,53,1.00);
}
</style>

jQ代碼：

<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    var ppap = $("p");
    var ddad = $(".ha");
    var i = 0;
    var m =100;
    var n =10;
    function My(i){
        ddad.animate({
            "left":m*i,
            "border-radius":n*i,
            });
        if(i>2,i<3){$(".ha").removeClass("cur2").addClass("cur");}
        else if(i>3,i<4){$(".ha").removeClass("cur").addClass("cur1");}
        else{$(".ha").removeClass("cur1").addClass("cur2");};
            };
    $("p").on("click",function (){
        i+=1;
        if(i>5){i=0};
        My(i);
        });
    timer = setInterval(function(){
        $("p").trigger("click").css("background","red");
        },1000);
    $(".ha").stop(true,true).mouseover(function (){
        clearInterval(timer);
        });
    $(".ha").stop().mouseout(function(){
        timer = setInterval(function(){
        $("p").trigger("click").css("background","red");
        },500);
        })
})
</script>

ps：首先咱們想設計怎樣的動畫，這裏簡單舉例，那就是點擊p標籤，而後下面的Div標籤會向右移動，具體的是每次移動100像素移動5次，而後在加載完成後設置了setInterval（）讓其能夠自動開始，而且設置了條件，讓他可以循環開始，下面咱們拆解一下代碼。

首先：定義了咱們須要的參數ppap和ddad，別想多了我很時尚的，嗯哼，ppap，好的繼續，而後咱們定義了全局常量和變量，常量n/m變量i；

其次：咱們新定義了一個函數My()，讓他幫咱們作一件事，什麼事情呢，那就是ddad即Div標籤的運動軌跡，animate({})。裏面完成兩件事left和border-radius兩個屬性值發生變化。裏面有疑問請百度一下，謝謝。定義好以後，在adimate中能夠設置動畫的完成事件，這裏咱們並無使用這個時間而是後面咱們對其新建的定時器。

而後：我給P標籤綁定一個點擊事件，在裏面我設置了變量的自動增長。和if（）{}條件函數，讓變量i值不超過5，而後這樣就會讓咱們的變量循環的動起來。

最後：給自定義的定時器綁定一個函數，幫咱們作的事情呢，就是在咱們不手動去點擊p標籤可以自動開始，而後調用trigger（）幫助咱們去重複的激活給P元素綁定的點擊事件。而後變量的值就會增長，返回給咱們的My(i)，而後有偏移的舉例就會增長，整個過程就循環的動起來了，繼而咱們給div綁定兩個mouse鼠標事件，大家看到我換着花樣對選擇器的使用，我也是測試一下，這樣會不會讓代碼出現問題，可是並無，因而可知對選擇器來講jQ的確很強大，他們完成的是懸停效果，劃過中止，滑出繼續開始動畫。

到這裏就結束了對整個動畫的操做，動畫很簡單，也很複雜，具體看實際生活中咱們怎麼去運用它，咱們用的不少的東西，導航，下拉，摺疊，手風琴，百葉窗，拖放，焦點圖等等不少的效果，都是一個對於這方面愛好的人員一定去了解和學習的東西，其實一門語言的運用會有不少相同之處，而且同一門語言解決一件動畫也有不少種不一樣的方法，咱們只是站在了別人的肩上，運道別人曾經設定好的東西，真的有一天咱們本身有了新的發現那才叫創做，如今的最多叫作擴展延伸，甚至更低。

animate與css中的transition和transform也有不少的共同點，canvas屬於Html5的東西，他的功能也足夠強大，固然了js是其中的核心基礎，原生的js如今看的比什麼都重要，做爲2017年的熱門語言它還有很大的擴展性，還有不少的運用途徑，這裏也沒有辦法所有闡述，就先提到一點關於animate，引入後發現delay（），stop（），隊列動畫（），回調等等。太多的東西須要本身去一步步嘗試和夯實，在接下來還要繼續走向服務器，走向app，ui.......