一、show()方法和hide()方法
.show()与hide()
show():根据hide()方法记住的display属性值来显示元素。
hide() : 将该元素的display样式改为 "none"。
参数:slow,normal,fast,数值
$("element").show("slow"); //元素将在600毫秒内慢慢地显示出来
$("element").show("normal"); //元素将在400毫秒内慢慢地显示出来
$("element").show("fast"); //元素将在200毫秒内慢慢地显示出来
$("element").hide("1000"); //元素将在1000毫秒(1秒)内慢慢地隐藏
fadeIn()方法和fadeOut()方法
fadeIn()/fadeOut() 只改变元素的不透明度
fadeOut() :会在指定的一段时间内降低元素的不透明度,直到元素完全消失("display:none")
fadeIn() :与fadeOut()完全相反
slideUp()方法和slideDown()方法
slideUp()/slideDown()只改变元素的高度。
$(function() {
$("#btn0").click(function() {
$("div").toggle(1000);
})$("#btn1").click(function() {
$("div").fadeOut(1000);
})
$("#btn2").click(function() {
$("div").fadeIn(1000);
})
$("#btn3").click(function() {
$("div").fadeToggle(1000);
})
$("#btn4").click(function() {
$("div").slideDown(1000);
})
$("#btn5").click(function() {
$("div").slideUp(1000);
})
$("#btn6").click(function() {
$("div").slideToggle(1000);
})
})
自定义动画方法animate()
animate(params, speed ,callback);
<script>
$(function() {
$("#btn").click(function() {
$("div").animate({
"left": "600px"
}, 3000).animate({
"top": "600px"
}, 3000)
})
})
</script>