Learn wisdom by the follies of others.
要從別人的愚行中學(xué)到聰明。
使用jQuery實(shí)現(xiàn)動(dòng)畫，代碼已經(jīng)簡單得不能再簡化了：只需要一行代碼！
jQuery內(nèi)置的幾種動(dòng)畫樣式：
show / hide
直接以無參數(shù)形式調(diào)
show()和hide()，會(huì)顯示和隱藏 DOM 元素。但是，只要傳遞一個(gè)時(shí)間參數(shù)進(jìn)去，就變成了動(dòng)畫
show()和hide()是從左上角逐漸展開或收縮的
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button class="toggle">Toggle</button>
<div id="test-show-hide"></div>
</body>
<script>
$('#hide').click(function(){
$("#test-show-hide").hide(3000);
});
$("#show").click(function(){
$("#test-show-hide").show(3000);
});
$('.toggle').click(function(){
$("#test-show-hide").toggle(2000);
});
</script>
Hide-show-animation
slideUp / slideDown
slideUp()和slideDown()則是在垂直方向逐漸展開或收縮的
<body>
<button id="up">SlideUp</button>
<button id="down">SlideDown</button>
<button class="toggle">SlideToggle</button>
<div id="test-slide-upDown"></div>
</body>
<script>
$('#up').click(function(){
$("#test-slide-upDown").slideUp(3000);
});
$("#down").click(function(){
$("#test-slide-upDown").slideDown(3000);
});
$('.toggle').click(function(){
$("#test-slide-upDown").slideToggle(2000);
});
</script>
slide-down-up-animation
fadeIn / fadeOut
fadeIn()和fadeOut()的動(dòng)畫效果是淡入淡出，也就是通過不斷設(shè)置 DOM 元素的opacity屬性來實(shí)現(xiàn)，而fadeToggle()則根據(jù)元素是否可見來決定下一步動(dòng)作
<body>
<button id="fadeIn">FadeIn</button>
<button id="fadeOut">FadeOut</button>
<button class="fadeToggle">FadeToggle</button>
<div id="test-fade"></div>
</body>
<script>
$('#fadeIn').click(function(){
$("#test-fade").fadeIn(1000);
});
$("#fadeOut").click(function(){
$("#test-fade").fadeOut(1000);
});
$('.fadeToggle').click(function(){
$("#test-fade").fadeToggle(2000);
});
</script>
fade-in-out-animation
自定義動(dòng)畫
animate()，它可以實(shí)現(xiàn)任意動(dòng)畫效果，我們需要傳入的參數(shù)就是 DOM 元素最終的 CSS 狀態(tài)和時(shí)間，jQuery 在時(shí)間段內(nèi)不斷調(diào)整 CSS 直到達(dá)到我們?cè)O(shè)定的值
<body>
<button id="animation">Start Animation</button>
<div id="test-animation" ></div>
</body>
<script>
$('#animation').click(function(){
var div = $('#test-animation');
div.animate({
opacity: 0.25,
width: '50px',
height: '50px'
});
});
</script>
animate()還可以再傳入一個(gè)函數(shù)，當(dāng)動(dòng)畫結(jié)束時(shí)，該函數(shù)將被調(diào)用
<script>
$('#animation').click(function(){
var div = $('#test-animation');
div.animate({
opacity: 0.25,
width: '50px',
height: '50px'
}, 3000, function () {
console.log('動(dòng)畫已結(jié)束');
// 恢復(fù)至初始狀態(tài):
$(this).css('opacity', '1.0').css('width', '100px').css('height', '100px');
});
});
</script>
DIY-animation
串行動(dòng)畫
jQuery的動(dòng)畫效果還可以串行執(zhí)行，通過
delay()方法還可以實(shí)現(xiàn)暫停，這樣，我們可以實(shí)現(xiàn)更復(fù)雜的動(dòng)畫效果
<script>
$('#animation').click(function(){
var div = $('#test-animations');
// 動(dòng)畫效果：slideDown - 暫停 - 放大 - 暫停 - 縮小
div.slideUp(3000).delay(1000).slideDown(2000).delay(1000).animate({
opacity: 0.25
}).delay(1000).fadeIn(2000).hide(1000);
});
</script>
serial-Animation
