jQuery三类切换动画效果
一.显示/隐藏/来回切换----show/hide/toggle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
.box{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<input type="button" id="hide" value="隐藏">
<input type="button" id="show" value="显示">
<input type="button" id="toggle" value="显示/隐藏切换">
<div class="box"></div>
<script>
$("#hide").on("click",function (e) {
$(".box").hide(1000)
});
$("#show").on("click",function (e) {
$(".box").show(1000)
});
$("#toggle").on("click",function (e) {
$(".box").toggle(1000)
})
</script>
</body>
</html>
二.向上滑动/向下滑动/来回切换–slideUp/slideDown/slideToggle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
.box{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<input type="button" id="slideUp" value="向上滑动">
<input type="button" id="slideDown" value="向下滑动">
<input type="button" id="slideToggle" value="向上/向下切换">
<p class="box"></p>
<script>
$("#slideUp").on("click",function (e) {
$(".box").slideUp(1000)
});
$("#slideDown").on("click",function (e) {
$(".box").slideDown(1000)
});
$("#slideToggle").on("click",function (e) {
$(".box").slideToggle(1000)
})
</script>
</body>
</html>
三.淡入/淡出/透明切换—fadeIn/fadeOut/fadeTo(time, opacity)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-1.11.1.js"></script>
<style>
.box{
width:200px;
height:200px;
background:red;
}
</style>
</head>
<body>
<input type="button" id="fadeIn" value="淡入">
<input type="button" id="fadeOut" value="淡出">
<input type="button" id="fadeToggle" value="淡入/淡出切换">
<input type="button" id="fadeTo" value="透明切换">
<p class="box"></p>
<script>
$("#fadeIn").on("click",function (e) {
$(".box").fadeIn(1000)
});
$("#fadeOut").on("click",function (e) {
$(".box").fadeOut(1000)
});
$("#fadeToggle").on("click",function (e) {
$(".box").fadeToggle(1000)
})
$("#fadeTo").on("click",function (e) {
$(".box").fadeTo(1000,0.3)
})
</script>
</body>
</html>