解析jQuery效果函數animate()


1、參數說明:

  animate(params,[speed],[easing],[fn])

  params:一組包含作為動畫屬性和終值的樣式屬性和及其值的集合<br/>
  speed:三種預定速度之一的字符串("slow"600ms,"normal"400ms, or "fast"200ms)或表示動畫時長的毫秒數值(如:1000)<br/>
  easing:要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing".<br/>
  fn:在動畫完成時執行的函數,每個元素執行一次。<br/>
2、注意點:  

  1、通過在屬性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 來讓元素做相對運動。如:left:"-50px",表示相對位置左移動50px;

    應該設置目標對象的position:relative這個屬性值,否則無效.
  2、所有指定的屬性必須用駱駝形式,比如用marginLeft代替margin-left.
  3、所有的可創建動畫效果的屬性必須是一個單一的數值,例如 寬度(width)、高度(height)、左邊距(left)、透明度(opacity)等,

    但是不能是background-color。  

    注:要實現顏色的動畫效果,必須使用 jQuery.Color() 插件。除非特殊聲明,否則這些屬性的單位都按照像素處理,可以使用的其他單位還包括 em 和 % 百分比。
  4、opacity:"show"表示1或"hide"表示0或"0.4等小數"
3、示例代碼:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>演示自定義animate方法效果</title>
<script src="../jQuery/jquery-3.1.0.min.js"></script>
<script>
  $(function(){
    $("#idleft").click(function(){
      $("#idsection").animate({left:"+200px"},"slow"); //在相對位置上向右頻移
    })
    $("#idheight").click(function(){
      $("#idsection").animate({marginLeft:+200,height:200,width:200,borderWidth:50,fontSize:50,opacity:0.3},1000);//長度默認為像素單位
    })
  })

</script>
</head>

<body>
<h2>演示自定義animate方法效果</h2>
<input type="button" value="height" id="idheight">&nbsp;
<input type="button" value="left" id="idleft">&nbsp;
<section style="width:50px;height:50px;background-color:#999;position:relative" id="idsection">演示</section>
</body>
</html>


  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM