jQuery中的自定义动画

jQuery中的自定义动画

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

• params:表示动画最终的样式
• speed：表示动画持续的时间，他可以跟具体的数值，也可以跟字符串"slow","normal", or "fast"
• easing：默认jQuery提供"linear" 和 “swing”，其他需要插件支持
• fn：动画完成的时候执行的函数，每一个动画执行一次

我们做一个效果，点击按钮之后盒子左右移动

• html

  <button id="left">«</button> <button id="right">»</button>
  <div class="block"></div>

• js

 $(function ($) {
     $("#right").click(function () {
         $(".block").animate({ left: '+500px' }, "slow");
     });

     $("#left").click(function () {
         $(".block").animate({ left: '-500px' }, "2000");
     });
 })

• css

  .block{
      position: absolute;
      width: 200px;
      height: 200px;
      background-color: #000;
  }

• 可以不用加单位