动画显示和隐藏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //显示动画用法1: show(); 不加参数
$("div").show(); //通过这个方法实现的：display: block;
// //显示动画用法2: show(2000); 毫秒值
// $("div").show(2000); //通过这个方法实现的：display: block;
// //通过控制 宽高透明度和display
//显示动画用法3: show(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").show("slow");
// $("div").show("fast");
// $("div").show("normal");
//显示动画用法1: show(毫秒值，回调函数[显示完毕执行什么]);
// $("div").show(5000,function () {
// alert("动画执行完毕！");
// });
})
//隐藏动画
$("button:eq(1)").click(function () {
// //显示动画用法1: hide(); 不加参数
$("div").hide(); //通过这个方法实现的：display: none;
// //显示动画用法2: hide(2000); 毫秒值
// $("div").hide(2000); //通过这个方法实现的：display: none;
// //通过控制 宽高透明度和display
//显示动画用法3: hide(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").hide("slow");
// $("div").hide("fast");
// $("div").hide("normal");
//显示动画用法4: hide(毫秒值，回调函数[显示完毕执行什么]);
// $("div").hide(2000,function () {
// alert("动画执行完毕！");
// });
})
$("button:eq(2)").click(function () {
//显示隐藏切换
//同样有四种用法
$("div").toggle(2000);
})
})
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
</body>
</html>
动画滑入和滑出
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //滑入动画用法1: slideDown(); 不加参数
$("div").slideDown();
// //滑入动画用法2: slideDown(2000); 毫秒值
// $("div").slideDown(2000);
// //通过控制 高和display
//滑入动画用法3: slideDown(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").slideDown("slow");
// $("div").slideDown("fast");
// $("div").slideDown("normal");
//滑入动画用法4: slideDown(毫秒值，回调函数[显示完毕执行什么]);
// $("div").slideDown(5000,function () {
// alert("动画执行完毕！");
// });
})
//滑出动画
$("button:eq(1)").click(function () {
// //滑出动画用法1: slideUp(); 不加参数
// $("div").slideUp();
// //滑出动画用法2: slideUp(2000); 毫秒值
// $("div").slideUp(2000); //通过这个方法实现的：display: none;
// //通过控制 高和display
//滑出动画用法3: slideUp(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").slideUp("slow");
// $("div").slideUp("fast");
// $("div").slideUp("normal");
//滑出动画用法1: slideUp(毫秒值，回调函数[显示完毕执行什么]);
$("div").slideUp(2000,function () {
alert("动画执行完毕！");
});
})
$("button:eq(2)").click(function () {
//滑入滑出切换
//同样有四种用法
$("div").slideToggle(1000);
})
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>切换</button>
<div></div>
</body>
</html>
动画淡入和淡出
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
/*opacity: 1;*/
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
// //淡入动画用法1: fadeIn(); 不加参数
$("div").fadeIn();
// //淡入动画用法2: fadeIn(2000); 毫秒值
// $("div").fadeIn(2000);
// //通过控制 透明度和display
//淡入动画用法3: fadeIn(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeIn("slow");
// $("div").fadeIn("fast");
// $("div").fadeIn("normal");
//淡入动画用法4: fadeIn(毫秒值，回调函数[显示完毕执行什么]);
// $("div").fadeIn(5000,function () {
// alert("动画执行完毕！");
// });
})
//滑出动画
$("button:eq(1)").click(function () {
// //滑出动画用法1: fadeOut(); 不加参数
// $("div").fadeOut();
// //滑出动画用法2: fadeOut(2000); 毫秒值
// $("div").fadeOut(2000); //通过这个方法实现的：display: none;
// //通过控制 透明度和display
//滑出动画用法3: fadeOut(字符串); slow慢：600ms normal正常:400ms fast快：200ms
// $("div").fadeOut("slow");
// $("div").fadeOut("fast");
// $("div").fadeOut("normal");
//滑出动画用法1: fadeOut(毫秒值，回调函数[显示完毕执行什么]);
// $("div").fadeOut(2000,function () {
// alert("动画执行完毕！");
// });
})
$("button:eq(2)").click(function () {
//滑入滑出切换
//同样有四种用法
$("div").fadeToggle(1000);
})
$("button:eq(3)").click(function () {
//改透明度
//同样有四种用法
$("div").fadeTo(1000,0.5, function () {
alert(1);
});
})
})
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>改透明度为0.5</button>
<div></div>
</body>
</html>
自定义动画
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
position: absolute;
left: 20px;
top: 30px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
jQuery(function () {
$("button").click(function () {
// var json = {"width":500,"height":500,"left":300,"top": 300,"border-radius":100};
// var json2 = {"width":100,"height":100,"left":100,"top": 100,"border-radius":100,"background-color":"red"};
//
// //自定义动画
// $("div").animate(json,1000, function () {
// $("div").animate(json2,1000, function () {
// alert("动画执行完毕！");
// });
// });
// //自定义动画
// $("div").animate({"display":"none","opacity":0,"width":0,"height":0},2000);
// $("div").animate({"height":0},2000);
// $("div").animate({"opacity":0},2000);
})
})
</script>
</head>
<body>
<button>动画</button>
<div></div>
</body>
</html>
动画停止
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
display: none;
background-color: pink;
}
</style>
<script src="jquery-1.11.1.js"></script>
<script>
$(function () {
//点击按钮后产生动画
$("button:eq(0)").click(function () {
$("div").slideDown(2000);
})
//滑出动画
$("button:eq(1)").click(function () {
$("div").slideUp(2000);
})
$("button:eq(2)").click(function () {
$("div").stop(); //都不写，默认两个都是false;
// 第一个参数表示后续动画是否要执行
//（true:后续动画不执行 ;false:后续动画会执行）
// 第二个参数表示当前动画是否执行完
//（true:立即执行完成当前动画 ;false:立即停止当前动画）
//四种情况：情况1：true,true
//（后续动画不执行，立即执行完成当前动画）
// $("div").stop(true,true);
//四种情况：情况2：false,true
//（后续动画会执行，立即执行完成当前动画）
// $("div").stop(false,true);
//四种情况：情况3：true,false
//（后续动画不执行，立即停止当前动画`）
// $("div").stop(true,false);
//四种情况：情况4：true,false
//（后续动画会执行，立即停止当前动画`）
// $("div").stop(false,false);
})
})
</script>
</head>
<body>
<button>滑入</button>
<button>滑出</button>
<button>停止</button>
<div></div>
</body>
</html>
