使用jQuery创建动画是件非常容易的事情，只需要掌握提供的animate API
javascript
$(selector).animate({params},[speed],[easing],[fn]);例子，点击按钮让这个元素偏移一定像素
javascript
$("button").click(function(){
$("div").animate({left:'250px'});
});其中，jQuery还提供了方便的方法,其实是语法糖,对animate方法的二次封装
hide，show分别修改元素的display属性为none和block
slideUp(收缩高度),slideDown(还原高度),本质是随时间修改元素的高度
fadeIn(淡入), fadeOut(淡出)，本质是随时间修改元素的opacity属性
详细的例子可以见w3school
jQuery自带效果有限，可以使用 jQuery Easing Plugin 另外jQuery UI 提供了更多的特效，如颤动，心跳，爆炸等
jQuery的animate还支持队列，逐帧播放
javascript
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});借助animate API最后一个callback参数，可以轻松实现无尽播放动画的效果。
html
<iframe height="265" style="width: 100%;" scrolling="no" title="jquery animation loop" src="https://codepen.io/mafeifan/embed/ExPJpRo?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/mafeifan/pen/ExPJpRo'>jquery animation loop</a> by finley
(<a href='https://codepen.io/mafeifan'>@mafeifan</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。