1、基础
(1).hide()隐藏 和.show()显示,参数可以写毫秒数表示执行时间
<script>
$("#btn1").on("click",function(){
$("#div1").hide(3000);
})
$("#btn2").on("click",function(){
$("#div1").show(3000);
})
</script>
(2)、 toggle() 相当于hide和show的结合体
2、渐变
(1)淡入淡出 fadeIn 和fadeOut
$("#btn1").on("click",function(){
$("#div1").fadeIn(5000);
})
$("#btn2").on("click",function(){
$("#div1").fadeOut(5000);
})
如上图,淡入淡出和隐藏显示的区别在于,宽高不变,只是颜色在改变
3、滑动
slideDown 往下滑出
slideUp 往上收起
slideToggle slideDown 和 slideUp 的结合体
<div id="div1"></div>
<button id="btn1">111</button>
<button id="btn2">222</button>
<script>
$("#btn1").on("click",function(){
$("#div1").slideDown(5000);
})
$("#btn2").on("click",function(){
$("#div1").slideUp(5000);
})
4、自定义
(1).animate() , 第一个参数是变化的样式,第二个参数是变化的时间
$("#btn1").on("click",function(){
$("#div1").animate({
width : 500,
height : 500
},3000)
})
此外,他还有第三个参数,动画回调函数,当动画执行完以后再执行
$("#btn1").on("click",function(){
$("#div1").animate({
width : 500,
height : 500
},3000,function(){
console.log("hahaha");
})
})
如果对同一个对象执行不同的animate,不会覆盖,而是会形成一个队列,等上一个动画执行完后执行下一个动画
这样的话,就可以用链式操作去写
当样式里的原来宽度的你不知道,你可以用+=去设置
(2).stop 停止当前正在执行的动画
$("#btn1").on("click",function(){
$("#div1").animate({
width : 500,
height : 500
},3000,function(){
console.log("hahaha");
}).animate({
opacity: 0.6
})
})
$("#btn2").on("click",function(){
$("#div1").stop();
})