jQuery 动画（五）

标签（空格分隔）： 前端学习

---

元素的显示与隐藏

方法	用法	描述
show	$('#d1').show(2000,function)	元素d1事先设置了display:none，可以设置参数代表元素显示动画花费的时间，还可以传递一个函数表示动画执行完后要进行的操作
hide	$('#d1').hide(2000,function)	与show类似，只不过是控制元素隐藏
taggle	$('#d1').toggle(2000,function)	与之前的toggleClass类似，控制元素的显示和隐藏

元素滑入滑出

方法	用法	描述
slideDown	$('li').slideDown(2000)	滑入
slideUp	$('li').slideUp(2000)	滑出
slideUp	$('li').slideToggle(2000)	自动切换滑入滑出

元素的淡入和淡出

方法	用法	描述
fadeIn	$('li').fadeIn(2000)	淡入动画
fadeOut	$('li').fadeOut(2000)	淡出动画
fadeToggle	$('li').fadeToggle(2000)	自动切换淡入和淡出
fadeTo()	$('li').fadeTo('speed','opacity')

自定义动画

$(selector).animate({params},speed,callback)

不建议使用，性能差CSS不少

停止动画

$(selector).stop(true,false)

第一个参数：(animate中可以嵌套animate)

• true：后续动画不执行
• false：后续动画会执行(默认)

第二个参数：

• true：立即执行完当前动画
• false：立即停止当前动画(默认)