1.显示隐藏效果
<body>
<div style="width=100px;height=100px;background-color=red;"></div>
<button id="btn1">隐藏</button>
<button id="btn2">显示</button>
<button id="btn3">切换效果</button>
</body>
<script type="text/javascript">
var $div = $("div")
$("#btn1").click(function(){
$div.hide("normal",function(){ //slow 600 normal 400 fast 200
console.log("隐藏完毕")
}) //hide()函数 第一个参数为执行隐藏效果用多少时间，第二个参数为执行完隐藏效果后执行的函数
})
$("#btn2").click(function(){
$div.show("normal",function(){
console.log("显示完毕")
}) //show()函数 与hide()类似
})
$("#btn3").click(function(){
$div.toggle("normal",function(){
console.log("执行完毕")
}) //toggle()函数 改变显示隐藏状态
})
</script>
2.淡入淡出效果
将例1的方法换为以下即可
.fadeOut()
.fadeIn()
.fadeToggle()
3.滑动显示滑动隐藏
将例1的方法换为以下即可
.slideUp()
.slideDown()
.slideToggle()
4.自定义动画效果
//在使用animate()方法时，必须设置元素的定位属性position为relative或absolute,元素才能动起来
var $div = $("div")
//animate(params [,speed] [,callback])
var a=$div.animate({left:200px,ocapity:"0.5"},1000) //一秒内向右移动200px,变淡至0.5
（如果在200px前加"+="表示在当前位置累加，"-="表示在当前位置累减）
.delay() 延迟多少秒
//停止动画
stop(clearQueue,gotoEnd)
clearQueue:是否清空尚未执行完的动画队列
gotoEnd:表示是否让正在执行的动画直接到动画结果
//判断是否在动画中
.is(":animated")
232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
