Learn wisdom by the follies of others.
要从别人的愚行中学到聪明。
使用jQuery实现动画，代码已经简单得不能再简化了：只需要一行代码！
jQuery内置的几种动画样式：
show / hide
直接以无参数形式调
show()和hide()，会显示和隐藏 DOM 元素。但是，只要传递一个时间参数进去，就变成了动画
show()和hide()是从左上角逐渐展开或收缩的
<head>
<meta charset="utf-8" />
<script src="//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()的动画效果是淡入淡出，也就是通过不断设置 DOM 元素的opacity属性来实现，而fadeToggle()则根据元素是否可见来决定下一步动作
<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
自定义动画
animate()，它可以实现任意动画效果，我们需要传入的参数就是 DOM 元素最终的 CSS 状态和时间，jQuery 在时间段内不断调整 CSS 直到达到我们设定的值
<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()还可以再传入一个函数，当动画结束时，该函数将被调用
<script>
$('#animation').click(function(){
var div = $('#test-animation');
div.animate({
opacity: 0.25,
width: '50px',
height: '50px'
}, 3000, function () {
console.log('动画已结束');
// 恢复至初始状态:
$(this).css('opacity', '1.0').css('width', '100px').css('height', '100px');
});
});
</script>
DIY-animation
串行动画
jQuery的动画效果还可以串行执行，通过
delay()方法还可以实现暂停，这样，我们可以实现更复杂的动画效果
<script>
$('#animation').click(function(){
var div = $('#test-animations');
// 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小
div.slideUp(3000).delay(1000).slideDown(2000).delay(1000).animate({
opacity: 0.25
}).delay(1000).fadeIn(2000).hide(1000);
});
</script>
serial-Animation
网友评论