标签：
在jQuery中使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
hide()的语法形式：$(selector).hide(speed,callback);
show()的语法形式：$(selector).show(speed,callback);
speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast"或毫秒。 callback 参数是隐藏或显示完成后所执行的函数名称，两个参数都是可选的。
代码实现
<script type="text/javascript"> $(function(){ $("#hide").click(function(){ $("div").hide(1000); }); $("#show").click(function(){ $("div").show(1000); }); });</script> ...省略代码 <h3> 隐藏和显示</h3> <input type="button" id="hide" value="点击隐藏" /> <input type="button" id="show" value="点击显示" /> <div>hello world</div>
在jQuery中，可以实现元素的淡入淡出效果。jQuery提供了四种fade方法：fadeIn()淡入已隐藏的元素、fadeOut()用于淡出可见的元素、fadeToggle()用于在fadeIn()和fadeOut()方法之间进行切换、fadeTo()允许渐变给定的不透明度（值介于0与1之间）
fadeIn()语法：$(selector).fadeIn(speed,callback);
fadeOut()语法：$(selector).fadeOut(speed,callback);
fadeToggle()的语法：$(selector).fadeToggle(speed,callback);
fadeTo()的语法：$(selector).fadeTo(speed,opacity,callback);
(1)描述
在示例中我们将把fade()的四种方法分别有不同参数是进行演示。
(2)代码实现
<script type="text/javascript"> $(function(){//fadeIn()方法 $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); }); }) $(function(){//fadeOut()方法 $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); }); }) $(function(){//fadeToggle()方法 $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }) $(function(){//fadeTo()方法 $("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); }); }) </script> ...省略代码 <button>点击这里，看效果</button> <div id="div1" style="width:80px;height:80px;display:none;"></div> <div id="div2" style="width:80px;height:80px;display:none;"></div> <div id="div3" style="width:80px;height:80px;display:none;"></div>
在jQuery中，可以在元素上创建滑动效果。jQuery提供了三种fade方法 slideDown()向下滑动元素、slideUp()用于向上滑动元素、slideToggle()可以在 slideDown() 与 slideUp() 方法之间进行切换。
slideDown()语法：$(selector).slideDown(speed,callback);
slideUp()语法：$(selector).slideUp(speed,callback);
slideToggle()的语法：$(selector).slideToggle(speed,callback);
参数speed规定效果的时长，可以取值："slow"、"fast"或毫秒。callback参数是滑动完成后所执行的函数名称。
在jQuery中，提供了animate()方法创建自定义的动画
语法：$(selector).animate({params},speed,callback);
params为必需的参数定义形成动画的CSS属性。speed和callback是可选参数，前者规定效果的时长，取值为："slow"、"fast"和毫秒；后者是动画完成后执行的函数名称。
(1)描述
点击按钮看到动画效果
(2)代码实现
<script type="text/javascript"> $(function(){ //增加表单中所有属性为可用的元素类别 $("#btn").click(function(){ $("div").animate({ height:"200px", width: "660px" },"slow",function(){ $("div").animate({ height:"80px", width: "80px" },"slow") }); }) }) </script> ...省略代码 <h3> 动画效果</h3> <input type="button" id="btn" value="点击看效果"/> <div style="width:80px;height:80px;background-color:#FF9966"></div>
在jQuery中，提供了stop()方法用于停止动画或效果，在它们完成之前。stop()方法适用于所有的jQuery效果函数，包括滑动淡入淡出和自定义动画。
语法：$(selector).stop(stopAll,goToEnd);
stopAll和goToEnd 参数都是可选的。前者规定是否应该清除动画队列，默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行；后者规定是否立即完成当前动画，默认是false。
所以默认地stop()会清除在被选元素上指定的当前动画
(1)描述
在滑动过程中点击按钮，停止滑动。
(2)代码实现
<script type="text/javascript"> $(function(){ $("#flip").click(function(){ $("#panel").slideToggle(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }) </script> ...省略代码</p> <h3 id="-">动画效果</h3> <p><button id="stop">停止滑动</button></p> <div id="flip"> 点击这里，向下滑动面板 </div> <div id="panel"> Hello world! </div>
标签：
原文地址：http://www.cnblogs.com/hlna/p/5669878.html
