html代码
<div></div>
<p>123</p>
<input type="button" id="btn" value="显示">
<input type="button" id="btn1" value="隐藏">
<input type="button" id="btn2" value="切换">
css代码
div{
width: 100px;
height: 100px;
background: red;
display: none;
}
jquery代码
$("#btn").click(function(){
$("div").show(3000);
})
$("#btn1").click(function(){
$("div").hide(3000);
})
$("#btn2").click(function(){
$("div").toggle(2000);
})
效果如下图
![](https://i-blog.csdnimg.cn/blog_migrate/ce0e4f805caaa85ca4e85c22b9c448ec.gif)
二.滑动又分为
show()
hide()
toggle()
html和css代码都一样
jquery代码
$("#btn").click(function(){
$("div").slideDown();
})
$("#btn1").click(function(){
$("div").slideUp();
})
$("#btn2").click(function(){
$("div").slideToggle();
})
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/d19ba5c86c81c86febb0c31c0b5cfec5.gif)
三.淡入淡出又分为
fadeIn()
fadeOut()
fadeTo()
fadeToggle
css代码
div{
width: 200px;
height: 400px;
background: red;
display: none;
position:absolute;
top:0;
left:0;
}
input{
margin-top:420px;
}
jquery代码
$("#btn").click(function(){
$("div").fadeIn(2000);
$("div").fadeTo("slow",2000);
})
/$("#btn1").click(function(){
$("div").fadeOut(2000);
})
$("#btn2").click(function(){
$("div").fadeToggle(2000);
})
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/a63f45913267566cc88c97b7473b113e.gif)
四.自定义(这个效果是最常用的一个效果,各种效果都能实现)
animate()
stop()
delay()
css代码
div{
width: 200px;
height: 400px;
background: red;
position:absolute;
top:0;
left:0;
}
input{
margin-left:700px;
}
jquery代码
$("#btn").click(function(){
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})
$("#btn1").click(function(){
$("div").stop().animate()
})
$("#btn2").click(function(){
$("div").delay(500).animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})
效果图
![](https://i-blog.csdnimg.cn/blog_migrate/a7350809a2a75bd42008e13ec0797a6e.gif)
五.设置
$.fx.off()
$.fx.interval()//相当于定时器
jquery代码
$.fx.off=true;
$("#btn").click(function(){
$("div").animate({
"width":"400px",
"height":"600px",
"left":"100px"
},2000)
})