jQuery 来了--动画，停止动画，回调函数Callback，链

动画

animate()方法

作用：用于创建自定义动画

语法：$(“selector”).animate({params},speed,callback);

参数 params：必需值。定义形成动画的CSS属性

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'200px'});
  });
});
</script> 

<button>开始动画</button><br><br>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

注：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

animate()–操作多个属性

使用animate()方法生成动画的过程中可同时使用多个属性

注：几乎可以使用animate()方法操作所有CSS属性，但属性名必须使用“驼峰命名法”，如应使用paddingLeft而不是padding-left

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0.5',
      height:'150px',
      width:'150px'
    });
  });
});

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

animate()–使用相对值

相对值：相对于元素的当前值，可以自定义相对值，需要在值的前面加上 += 或 -=

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',
      width:'+=150px'
    });
  });
});
</script> 

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

animate()–使用预定义的值

可以将属性的动画值设置为”show”,”hide”或”toggle”

例.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>

animate()–使用队列功能

编写多个 animate() 调用，jQuery 会创建包含这些方法调用的”内部”队列。然后逐一运行这些 animate 调用

例1.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script>

<button>开始动画</button> 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

例2.

<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");  
    div.animate({left:'100px'},"slow");
    div.animate({fontSize:'3em'},"slow");
  });
});
</script> 

<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

停止动画

stop()方法

作用：在动画或效果完成之前停止它

语法：$(“selector”).stop(stopAll,goToEnd);

参数 stopAll：可选值。规定是否应该清除动画队列，默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行

参数 goToEnd：可选值。规定是否立即完成当前动画，默认是false

默认stop()会清除在被选元素上指定的当前动画

例.

<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>

<button id="stop">停止滑动</button>
<div id="flip">点我向下滑动面板</div>
<div id="panel">Hello world!</div>

Callback

回调函数Callback在当前动画 100% 完成之后执行

例1.
回调函数会在动画效果完全实现后执行：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(2000,function(){
      alert("段落现在被隐藏了");
    });
  });
});
</script>

<button>隐藏</button>
<p>Hello Nico</p>

例2.
未使用回调函数，则在动画效果完成前执行：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});
</script>

<button>隐藏</button>
<p>Hello Nico</p>

链

作用：链允许在一条语句中运行多个jQuery方法（在相同的元素上）

方法链接

如需链接一个动作，只需把该动作追加到之前的动作上

chaining的作用：允许在相同的元素上一条接着一条运行多条jQuery命令。避免浏览器多次查找相同的元素

例.

<script>
$(document).ready(function()
  {
  $("button").click(function(){    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>

<p id="p1">菜鸟教程!!</p>
<button>点我</button>