Query 一些简单的效果
$(selector).hide(speed,callback); 隐藏
$(selector).show(speed,callback); 显示
$(selector).toggle(speed,callback); 切换
淡入
$(selector).fadeIn(speed,callback); 淡出
$(selector).fadeToggle(speed,callback); 切换
$(selector).fadeTo(speed,opacity,callback); 淡入（淡出）到（透明度）
$(selector).slideDown(speed,callback); 向下滑动
$(selector).slideDown(speed,callback); 向上滑动
$(selector).slideToggle(speed,callback); 切换
$(selector).animate({params},speed,callback); 自定义动画
实例：操作多个属性
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
'+=150px'
});
});
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({'100px',opacity:'0.8'},"slow");
});
$(selector).stop(stopAll,goToEnd); 停止滑动
stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。）
<!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>
方法链接
$