jQuery 常用方法2（持续更新）

5.fadeIn（） fadeOut（） fadeToggle（） fadeTo（）

fadeIn（）：用于淡入已隐藏的元素。

fadeOut( ) :方法用于淡出可见元素。

fadeToggle( ) :方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

fadeTo( ) :方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

重点：在搞这几个方法时，我想到了另一对方法hide（）show（）。hide隐藏起来的内容能否被“淡入”，被“淡出”的内容能否被“淡入”。为了方便，我拿fadeToggle方法和show，hide进行试验。发现，他们之间能相互作用！这个发现让我有点小兴奋，附上试验代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-2.2.1.min.js"></script>
	<script type="text/javascript">
	$(function()
	{
		$(".btn1").click(function()
		{
			$(".test").hide("slow");
		});

		$(".btn2").click(function(){
			$(".test").fadeToggle("slow");
		});

		$(".btn3").click(function(){
			$(".test").show("slow");
		})
	});
	</script>

</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a para</p>
<p>This is another</p>
<button type="button" class="btn1">Click me to hide</button>
<button type="button" class="btn3">Click me to show</button>
<button type="button" class="btn2">fadeToggle </button>

</body>
</html>

6.animate() ：用于创建自定义动画。几乎可以操纵所有css属性，可以使用队列功能。

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

$(selector).stop(stopAll,goToEnd);

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

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

因此，stop有四种停止方式：1.停止当前动画，允许动画队列中下一个动画进行。（false，false）2.停止当前动画，并清除动画队列，即所有的动画都不会执行并被清除掉。（true，false）3.立即完成当前的动画，允许动画队列中下一个动画正常进行。（false，true）。4.立即完成当前动画，并清除动画队列（true，true）。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  
  $("#stop").click(function(){
    $("div").stop();
  });

  $("#stop2").click(function(){
    $("div").stop(true);
  });

  $("#stop3").click(function(){
    $("div").stop(true,true);
  });
  
});
</script> 
</head>
<body>

<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p> 

<div style="background:#98bf21;height:100px;200px;position:absolute;">HELLO</div>

</body>
</html>