一 基本的show/hide动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示与隐藏</title>
<script src="js/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function () {
$("div").css({
"display":"none",
"height":"200px",
"width":"300px",
"background":"gold"
});
$("button").eq(0).click(function () {
//$("div").show();//1.显示
//$("div").show(3000);//2.毫秒数
//$("div").show("slow");//3.慢
//$("div").show("fast");//4.快
//$("div").show("normal");//5.正常
$("div").show(2000,function () {
//alert("show动画执行完毕");
$("div").hide(1000);//6.show动画执行完毕
});
}) ;
$("button:last").click(function () {
$("div").hide();//隐藏
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<div>
</div>
</body>
</html>
总结
show()与hide()分别表示显示与隐藏。
在一个参数的情况下,可以分为
- show(毫秒数,“slow”,“fast”,“normal”)
- show(slow) 慢
- show (fast) 快
- show (normal) 正常
在两个参数的情况下
show(2000,function(){
})
表示show动画执行完毕之后执行的函数
二 滑动效果(slideDown/slideUp/slideToggle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动效果</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("div").css({
"display":"none",
"margin-bottom":"20px",
"float":"left",
"height":"200px",
"width":"300px",
"background":"gold"
});
//滑动效果
$("input[type='button']").click(function () {
/**
* 两个参数
* 1 动画执行的时长(毫秒数,“slow”,“fast”,“normal”)
* 2 动画执行完毕后要执行的函数
* */
$(".divItem:first").slideDown(3000,function () {
});
/**
* 三个参数
* 1 动画执行时长(毫秒数,“slow”,“fast”,“normal”)
* 2 动画执行效果 (“swing”,“linear”)
* 3 动画执行完毕后要执行的函数
* */
$(".divItem").eq(1).slideDown(2000,"swing",function () {
});
$(".divItem:last").slideDown(2000,"linear",function () {
});
});
$("button:first").click(function () {
$(".divItem:first").slideUp(2000,function () {
});
$(".divItem").eq(1).slideUp(2000,"swing",function () {
});
$(".divItem:last").slideUp(2000,"linear",function () {
});
});
$("button:last").click(function () {
$(".divItem:first").slideToggle(2000,function () {
});
$(".divItem").eq(1).slideToggle(2000,"swing",function () {
});
$(".divItem:last").slideToggle(2000,"linear",function () {
});
});
});
</script>
</head>
<body>
<input type="button" value="下拉">
<button>收起</button>
<button>上拉下拉切换</button>
<div class="divItem"></div>
<div class="divItem"></div>
<div class="divItem"></div>
</body>
</html>
- 两个参数
- 1 动画执行的时长(毫秒数,“slow”,“fast”,“normal”)
- 2 动画执行完毕后要执行的函数
- 三个参数
- 1 动画执行时长(毫秒数,“slow”,“fast”,“normal”)
- 2 动画执行效果 (“swing”,“linear”)
- 3 动画执行完毕后要执行的函数
三 淡入淡出效果(fadeIn/fadeOut/fadeToggle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$(".divItem").css({
"height":"200px",
"width":"300px",
"background-color":"gold",
"float":"left",
"display":"none",
"margin-left":"10px"
});
$("button").eq(0).click(function () {
$(".divItem").eq(0).fadeIn(2000);
$(".divItem").eq(1).fadeIn(2000,"swing",function () {
});
$(".divItem").eq(2).fadeIn(2000,"linear",function () {
});
});
$("button").eq(1).click(function () {
$(".divItem").eq(0).fadeOut(2000);
$(".divItem").eq(1).fadeOut(2000,"swing",function () {
});
$(".divItem").eq(2).fadeOut(2000,"linear",function () {
});
});
$("button").eq(2).click(function () {
$(".divItem").eq(0).fadeToggle(2000);
$(".divItem").eq(1).fadeToggle(2000,"swing",function () {
});
$(".divItem").eq(2).fadeToggle(2000,"linear",function () {
});
});
/**
*第二个参数为一个0至1之间表示透明度的数字
* */
$("button").eq(3).click(function () {
$(".divItem").eq(0).fadeTo(2000,0.5,function () {
});
$(".divItem").eq(1).fadeTo(2000,0.7,"swing",function () {
});
$(".divItem").eq(2).fadeTo(2000,0.8,"linear",function () {
});
});
/**
* 自定义动画
* */
$("button").eq(4).click(function () {
$(".divItem").animate({
"width":"500px",
"height":"600",
"opacity":"1"
//"background":"green"
},2000,"swing",function () {
});
});
});
</script>
</head>
<body>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切换</button>
<button>设置不透明度</button>
<button>自定义动画</button>
<div class="divItem"></div>
<div class="divItem"></div>
<div class="divItem"></div>
</body>
</html>
淡入淡出参数与滑动效果参数相同。
- 自定义动画animate();
- 四个参数
- 1 属性设置(样式等)
- 2 时间设置 (毫秒,“slow”,“fast”,“normal”)
- 3 效果设置 (“swing”,“linear”)
- 4 函数 (动画执行完毕执行)
- 设置不透明度fadeTo();
- 三个参数
- 1 时间
- 2 为一个0至1之间表示透明度的数字
- 3 函数
- stop()
- stop(false)停止当前动画,后续动画继续执行
- stop (true)停止当前动画,并清空后续队列中的动画
- stop (false,true)当前动画立即执行完毕,后续队列中的动画继续执行
- stop(true,true)当前动画立即执行完毕,并清空后续队列中的所有动画