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 3秒执行完
$("div").show(3000);
})
$("#btn1").click(function(){ //隐藏div 3秒执行完
$("div").hide(3000);
})
$("#btn2").click(function(){
//切换显示隐藏div 2秒执行完
$("div").toggle(2000);
})
效果如下图
二.滑动又分为
show()
hide()
toggle()
html和css代码都一样
jquery代码
$("#btn").click(function(){ //展开div
$("div").slideDown();
})
$("#btn1").click(function(){ //收缩div
$("div").slideUp();
})
$("#btn2").click(function(){
//切换展开收缩div
$("div").slideToggle();
})
效果图
三.淡入淡出又分为
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
$("div").fadeToggle(2000);
})
效果图
四.自定义(这个效果是最常用的一个效果,各种效果都能实现)
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)
})
效果图
五.设置
$.fx.off()
$.fx.interval()//相当于定时器
jquery代码
//暂停一切动画效果
$.fx.off=true;
$("#btn").click(function(){ //设置动画效果
$("div").animate({ "width":"400px", "height":"600px", "left":"100px"
},2000)
})