<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style type="text/css">
#btn{
width: 100px;
text-align: center;
height: 30px;
cursor: pointer;
-webkit-user-select: none;
background: orange;
line-height: 30px;
}
#show{
width: 200px;
height: 200px;
background: orchid;
margin-top: 20px;
position: absolute;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<div id="btn">显示隐藏</div>
<div id="show">
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("#show").hide(10000);
$("#btn").get(0).onclick = function(){
1.hide 隐藏
$("#show").hide(3000);
可以接受一个回调函数,当动画执行完毕之后就会触发回调函数.
$("#show").hide(3000,function(){
alert("已经完全隐藏");
});
$("#show").hide(3000,"linear",function(){
alert("已经全部隐藏")
});
//时间问题 fast slow normal
$("#show").hide("normal");
//show 显示
$("#show").show("slow",function(){
alert("显示好了")
})
//3.toggle:显示或隐藏当前元素,显示的时候就隐藏,隐藏的时候就显示.
$("#show").toggle(3000);
//4.fadeIn:先显示元素,后改变透明度(opacity)逐步提升到100%;
$("#show").fadeIn(5000);
//5.fadeOut:将当前元素的不透明不逐步降为0,在隐藏元素.
$("#show").fadeOut(5000);
//6.fadeToggle:以逐渐透明或逐渐不透明的方式,折叠显示当前元素
$("#show").fadeToggle(3000);
//7.slideDown:以从上向下滑入的方式显示当前元素
$("#show").slideDown(3000);
//8.slideUp : 以从下向上滑出的方式隐藏当前元素.
$("#show").slideUp(3000);
//9.slideToggle :以垂直滑入或滑出的方式,折叠显示当前元素
$("#show").slideToggle(3000);
//10.animate
//3个参数
//1.结束的时候css属性的值(数值类相关的属性 背景颜色 border不好使)
//2.时间
//3.回调函数
// $("#show").animate({
//// width:"30px",
//// opacity:"0.2",
//// left:"500px",
//// top:"600px"
// width:"0px",
// height:"0px",
// opacity:"0",
//
// },3000,function(){
// alert("动画结束");
// }) ;
//11.stop 停止动画的意思
//$("#show").stop();
//12.delay 延迟执行动画(如果需要执行延迟动画操作,需要先写延迟代码)
$("#show").delay(3000);
$("#show").toggle(1000);
}
<html>
<head>
<meta charset="UTF-8">
<title>jQuery动画</title>
<style type="text/css">
#btn{
width: 100px;
text-align: center;
height: 30px;
cursor: pointer;
-webkit-user-select: none;
background: orange;
line-height: 30px;
}
#show{
width: 200px;
height: 200px;
background: orchid;
margin-top: 20px;
position: absolute;
left: 0;
top: 100px;
}
</style>
</head>
<body>
<div id="btn">显示隐藏</div>
<div id="show">
</div>
</body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$("#show").hide(10000);
$("#btn").get(0).onclick = function(){
1.hide 隐藏
$("#show").hide(3000);
可以接受一个回调函数,当动画执行完毕之后就会触发回调函数.
$("#show").hide(3000,function(){
alert("已经完全隐藏");
});
$("#show").hide(3000,"linear",function(){
alert("已经全部隐藏")
});
//时间问题 fast slow normal
$("#show").hide("normal");
//show 显示
$("#show").show("slow",function(){
alert("显示好了")
})
//3.toggle:显示或隐藏当前元素,显示的时候就隐藏,隐藏的时候就显示.
$("#show").toggle(3000);
//4.fadeIn:先显示元素,后改变透明度(opacity)逐步提升到100%;
$("#show").fadeIn(5000);
//5.fadeOut:将当前元素的不透明不逐步降为0,在隐藏元素.
$("#show").fadeOut(5000);
//6.fadeToggle:以逐渐透明或逐渐不透明的方式,折叠显示当前元素
$("#show").fadeToggle(3000);
//7.slideDown:以从上向下滑入的方式显示当前元素
$("#show").slideDown(3000);
//8.slideUp : 以从下向上滑出的方式隐藏当前元素.
$("#show").slideUp(3000);
//9.slideToggle :以垂直滑入或滑出的方式,折叠显示当前元素
$("#show").slideToggle(3000);
//10.animate
//3个参数
//1.结束的时候css属性的值(数值类相关的属性 背景颜色 border不好使)
//2.时间
//3.回调函数
// $("#show").animate({
//// width:"30px",
//// opacity:"0.2",
//// left:"500px",
//// top:"600px"
// width:"0px",
// height:"0px",
// opacity:"0",
//
// },3000,function(){
// alert("动画结束");
// }) ;
//11.stop 停止动画的意思
//$("#show").stop();
//12.delay 延迟执行动画(如果需要执行延迟动画操作,需要先写延迟代码)
$("#show").delay(3000);
$("#show").toggle(1000);
}
</script>
