1.jQuery动画效果,隐藏和显示。
有两个方法分别是:slideDow() toggleDoe()
语法:$(selector).hide(speed.callback)
语法:$(selector).show(speed.callback)
callback参数:是隐藏或显示完成后执行的函数名称。
语法:$(selector).toggle(speed.callback) 点击显示/隐藏
<body>
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="显示">
<input type="button" id="btn3" value="隐藏/显示">
<input type="button" id="btn4" value="上拉">
<input type="button" id="btn5" value="下拉">
<input type="button" id="btn6" value="上拉/下拉"><input type="button" id="btn7" value="自定义">
<div id="box"></div>
</body>
<script src="jquery.js"></script>
<script>
$("#btn1").click(function(){ $("#box").hide(200,"liner",function(){ alert("结束")
}) )
$("#btn2").click(function(){ $("#box").show(200)
})
$("#btn3").click(function(){ $("#box").toggle(200)
})</script>
callback参数:是隐藏或显示完成后执行的函数名称。
2.Jquery滑动和动画
两个方法:slideDow() toggleDoe()
$("#btn4").click(function(){
$("#box").slideUP(200)
})
$("#btn5").click(function(){
$("#box").slideDown(200)
})
$("#btn6").click(function(){
$("#box").slideToggle(200)
})
3.JQuery动画效果,动画
animate()方法用于创建自定义的动画。
语法:$(selector),animate({params},speed,callback)
$("#btn7").click(function(){
$("#box").animate({
width:0,
height:0,
})
},200,function(){
console.log("结束"
})