描述了用jQuery实现连续动画效果的方法。分享给大家参考。具体如下：

介绍了jQuery实现一系列连续的动画效果，并先设置好这些动画，然后在jQuery的作用下完成一个又一个动画，这是网页游戏编写中一个基本但重要的动画生成技巧，也是前台设计需要掌握的。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-lx-animate-style-demo/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML 1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；Charset=utf-8' /titlejQuery实现连续动画效果/title style type=' text/CSS ' * { margin :0；划水：0；} body { font-size : 13px；线高：130%；padding: 60px } #面板{ width: 60pxborder: 1px固体# 0050D0height:22px飞越：隐藏；}.head { padding: 5px背景# 96E555cursor:指针；宽度： 300 px；}.内容{ padding: 10pxtext-indent : 2em；边框-top: 1px实心# 0050D0显示：块；宽度width:280px}/style script type=' text/JavaScript ' src=' http : jquery 1 . 3 . 2 . js '/script script type=' text/JavaScript ' $(function(){ $(' button : eq(0)')。单击(function () { $('#panel '))。动画({高度： '150' }，1000)。动画({width : '300' }，1000)。隐藏(2000年)。动画({高度： '显示'，宽度： '显示'，不透明度： '显示' }，1000)。动画({height : '500'}，1000)；});$(“button : eq(1)”)。单击(function () { $('#panel '))。stop()；//停止当前动画，继续下一个动画})；$(“button : eq(2)”)。单击(function () { $('#panel '))。停止(真)；//清除元素的所有动画})；$(“button : eq(3)”)。单击(function () { $('#panel '))。停止(假，真)；//让当前动画直接达到最终状态，继续下一个动画})；$(“button : eq(4)”)。单击(function () { $('#panel '))。停止(真，真)；//清除元素的所有动画，让当前动画直接达到最终状态})；})/脚本/head dy按钮开始一系列动画/button button button()/button button(true)/button button(false，true)/buttonbutton (true，true)/button div id=' panel ' H5 class=' head '什么是jQuery？/h5 div class='content' jQuery是继Prototype之后的又一个优秀的JavaScript库。这是一个由约翰瑞西于2006年1月创建的开源项目。jQuery以其简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操纵DOM、处理事件、执行动画和开发Ajax的工作。它独特而优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。/div/div/body/html希望这篇文章对大家的jQuery编程有所帮助。