jQuery 效果- 动画

jQuery 效果- 动画

jQuery 动画 - animate() 方法

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

1. 必需的 params 参数定义形成动画的 CSS 属性。
2. 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
3. 可选的 callback 参数是动画完成后所执行的函数名称。

jQuery animate() 方法用于创建自定义动画
注意：

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

animate() - 操作多个属性
在生成动画时，可同时使用多个属性，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
使用队列功能

 $(function() {
 	$("button").click(function() {
	   		var div=$("div");
	   		div.animate({height:'300px',opacity:'.4',},'slow');
	   		div.animate({width:'300px',opacity:'.8',},'slow');
	   		div.animate({height:'100px',opacity:'.4',},'slow');
	   		div.animate({width:'100px',opacity:'.8',},'slow');
	   	})
	 });

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。
改变颜色插件引用地址
https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js

animate() - 使用相对值

定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

 $("button").click(function(){
    $("div").animate({
      left:'150px',
      height:'+=150px',//在元素当前值增加150px
      width:'+=150px'
    });
  });
  
  //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
   $("button").click(function(){
    $("div").animate({
      height:'toggle' //高度可以上下滑动变化
    });
  });
 
 //使用队列功能，可以编写多个animate()调用，逐一运行
 $("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");
  });

停止动画 stop()

stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

//带文本
	   $("#start").click(function() {
	   	var div =$("div");
	   	div.animate({left:'250px'},3000);
	   	div.animate({fontSize:'3em'},3000);
	   });
	//语法:$(selector).stop(stopAll,goToEnd);
		//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
	
		//stop()仅停止正在活动的动画，还未活动的动画会继续完成
	   $("#stop").click(function() {
	   	   $("div").stop();
	   });

	   //stop(true)会停止所有的动画，无论是正在活动的还是未开始的
	   $("#allStop").click(function() {
	   	 $("div").stop(true);
	   });

	   //stop(true,true)会停止所有动画，且快速完成
	   $("#stop_action").click(function() {
	   	 $("div").stop(true,true);
	   })
     });

  <button id="start">开始</button>
    <button id="stop">停止</button>
    <button id="allStop">停止所有</button>
    <button id="stop_action">停止动画，快速完成动作</button><br><br><br>
	<!-- <div id="div1"></div>
	<p id="text">jQuery</p> -->
	<div style="background:#98bf21;height:100px;width:300px;position:absolute;margin-left: 20px;">HELLO</div>

回调函数Callback()

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

使用回调函数

//在隐藏效果完全完成后弹出警告框
$("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落已被隐藏了");
    });
  });

没有使用回调函数

//警告框会在隐藏效果完成前弹出
 $("button").click(function(){
    $("p").hide(1000);
    alert("现在已被隐藏了");
  });

链(Chaining)

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）

 $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });