- jQuery 隐藏与显示
- jQuery 淡入淡出
- jQuery 滑动
- jQuery 动画
- jQuery 停止动画
- jQuery Callback
- jQuery Chaining
jQuery 隐藏与显示
两个简单的很炫效果：
隐藏与显示动画1.gif
代码：
<p>你好吗</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">隐藏/显示</button>
$(document).ready(function () {
$("#hide").click(function () {
$("p").hide(1000);
}) ;
$("#show").click(function () {
$("p").show(1000);//1000毫秒
}) ;
$("#toggle").click(function () {
$("p").toggle(1000);//同时控制显示与隐藏
}) ;
});
隐藏与显示动画2.gif
代码：
<body>
<p>你好吗</p>
</button>-->
<script>
for(var i = 0 ; i <5;i++){
$("<div>").appendTo(document.body);
}
$("div").click(function () {
$(this).hide(2000,function () {
$(this).remove();//隐藏后移除掉div
});
});
</script>
jQuery 淡入淡出
首先看效果图：
淡入淡出效果.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="fadeInOut.js"></script>
</head>
<body>
<button id="in">淡入</button>
<button id="out">淡出</button>
<button id="toggle">淡入/淡出</button>
<button id="to">fadeto</button>
<div id="div1" style="display: none; width: 80px;height: 80px;background-color: aqua"></div>
<div id="div2" style="display: none; width: 80px;height: 80px;background-color: sienna"></div>
<div id="div3" style="display: none; width: 80px;height: 80px;background-color: fuchsia"></div>
</body>
</html>
/**
* Created by chuanglong02 on 17/1/24.
*/
$(document).ready(function () {
$("#in").click(function () {
$("#div1").fadeIn(1000);
$("#div2").fadeIn(1000);
$("#div3").fadeIn(1000);
});
$("#out").click(function () {
$("#div1").fadeOut(1000);
$("#div2").fadeOut(1000);
$("#div3").fadeOut(1000);
});
$("#toggle").click(function () {
$("#div1").fadeToggle(1000);
$("#div2").fadeToggle(1000);
$("#div3").fadeToggle(1000);
});
$("#to").click(function () {
$("#div1").fadeTo(1000,1);
$("#div2").fadeTo(1000,0.75);
$("#div3").fadeTo(1000,0.3);//设置透明度
});
});
jQuery 滑动 ,和上面显示隐藏是一样的
效果图：
滑动显示与隐藏.gif
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="slide.js"></script>
<style>
#flipshow,#content,#fliphide,#flip{
padding: 5px;
text-align: center;
background-color: #ece023;
border: 1px solid red;
}
#content{
padding: 50px;
display: none;
}
</style>
</head>
<body>
<div id="flipshow">显示</div>
<div id="fliphide">隐藏</div>
<div id="flip">显示/隐藏</div>
<div id="content">helloword</div>
</body>
</html>
$(document).ready(function () {
$("#flipshow").click(function () {
$("#content").slideDown(1000);
});
$("#fliphide").click(function () {
$("#content").slideUp(1000);
});
$("#flip").click(function () {
$("#content").slideToggle(1000);
});
});
回调 callback
动画在结束后都有个回调，可以执行一个或者多个方法:
效果图：
动画回调.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="callbakc.js"></script>
</head>
<body>
<button>隐藏</button>
<p>hello Worldhello Worldhello World</p>
</body>
</html>
$(document).ready(function () {
$("button").click(function () {
$("p").hide(1000,function () {
// $("p").show(); //回调 ，动画执行之后的回调
$("p").css("color","red").slideUp(1000).slideDown(1000);
});
});
});
