jQuery基础动画相关
2018-02-01 本文已影响15人
GA_
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<span id="hide">点击隐藏</span>
<span id="show">点击显示</span>
<span id="toggle">点击显示/隐藏</span>
<p>一人 我饮酒醉 醉把佳人成双对 两眼 是独相随 我只求他日能沙下这毒誓 百花 迈 驰骋疆场我求一败[1]
</p>
<br />
<br />
<br />
<button id="fadeIn">fadeIn动画</button>
<button id="fadeOut">fadeOut动画</button>
<button id="fadeToggle">fadeToggle动画</button>
<button id="fadeTo">fadeTo动画</button>
<div id="div1" style="width: 100px; height: 100px; background-color: #0000FF;">
</div>
<div id="div2" style="width: 100px; height: 100px; background-color: #4CAF50;">
</div>
<div id="div3" style="width: 100px; height: 100px; background-color: #F44336;">
</div>
<br />
<br />
<br />
<button id="slideDown">slideDown动画</button>
<button id="slideUp">slideUp动画</button>
<button id="slideToggle">slideToggle动画</button>
<p>一人 我饮酒醉 醉把佳人成双对 两眼 是独相随 我只求他日能沙下这毒誓 百花 迈 驰骋疆场我求一败[1]</p>
<p>一人 我饮酒醉 醉把佳人成双对 两眼 是独相随 我只求他日能沙下这毒誓 百花 迈 驰骋疆场我求一败[1]</p>
<br />
<br />
<br />
<button id="btn_animation">-animation start-</button>
<button id="btn_stop_animation">-animation stop-</button>
<div id="p_animation" style="width: 100px; height: 100px; background-color: #F44336; position:absolute;">
</div>
<script>
// 隐藏 1000是动画执行时间
$("#hide").click(function() {
$("p").hide(1000, function() {
alert("p标签隐藏完成")
})
});
// 展示 1000是动画执行时间
$("#show").click(function() {
$("p").show(1000)
});
// 展示/隐藏
$("#toggle").click(function() {
$("p").toggle(2000)
});
// 淡入
$("#fadeIn").click(function() {
$("#div1").fadeIn(1000)
$("#div2").fadeIn('slow')
$("#div3").fadeIn(3000)
});
// 淡出
$("#fadeOut").click(function() {
$("#div1").fadeOut(1000)
$("#div2").fadeOut('slow')
$("#div3").fadeOut(3000)
});
// 淡出/淡入
$("#fadeToggle").click(function() {
$("#div1").fadeToggle(1000)
$("#div2").fadeToggle('slow')
$("#div3").fadeToggle(3000)
});
// 渐变到
$("#fadeTo").click(function() {
$("#div1").fadeTo(1000, 0.2)
$("#div2").fadeTo('slow', 0.5)
$("#div3").fadeTo(3000, 0.8)
});
// 收起
$("#slideDown").click(function() {
$("p").slideDown(1000)
});
// 展示
$("#slideUp").click(function() {
$("p").slideUp(1000)
});
// 收起/展示
$("#slideToggle").click(function() {
$("p").slideToggle(1000)
});
// 动画
$("#btn_animation").click(function() {
var p = $("#p_animation");
p.animate({
left:'250px',
opacity: '0.5',
height: '200'
}, 4000);;
p.animate({
left:'0px',
opacity: '0.6',
height: '100px'
});
p.animate({
left:'200px',
opacity: '0.8',
height: '300px'
}, 2000);
});
$("#btn_stop_animation").click(function() {
var p = $("#p_animation");
p.stop();
});
</script>
</body>
</html>
