JQuery动画和停止动画实例代码

复制代码代码如下:<html xmlns="http://www.w3.org/1999/xhtml"><head> <title>动画效果</title><%--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">--%><script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#begin").click(function () { for (var i = 0; i < 5; i++) { $("div").animate({ left: '250px', opacity: '0.5',//透明度 height: '150px', width: '150px' }, 'slow'); $("#sec").show('slow'); $("div").animate({ left: '0px', opacity: '1', height: '100px', width: '100px' }, 'slow'); $("#sec").hide('slow'); } }); //停止当前动画，跳入下一个动画 $("#stop").click(function () { $("div").stop(); }) //停止所有动画，保持当前状态 $("#stop1").click(function () { $("div").stop(true,false); }) //停止所有动画，跳到当前动画终点 $("#stop2").click(function () { $("div").stop(true, true); }) /* $(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。下面的例子演示 stop() 方法，不带参数：实例 */ });</script> </head><body> <button id="begin">开始动画</button> <button id="stop">停止当前动画，进入下一个动画</button> <button id="stop1">瞬间停止</button><button id="stop2">停止所有动画，跳到当前动画终点</button><p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p><div style="background:#98bf21;height:100px;width:100px;position:absolute;"> <p id="sec" style="display:none;">第二次才显示</p></div> </body></html>

　　推荐阅读

　　js给dropdownlist添加选项的小例子

复制代码代码如下: <input name="" type="text" id="newDirtxt"/> <input class="btn" name="" type="button" value="创建新目录" onclick="newDir()" /> ?<BR><BR><BR>Js代码 <BR><BR><script type="text/j>>>详细阅读

本文标题：JQuery动画和停止动画实例代码

地址：http://www.17bianji.com/kaifa2/JS/22297.html

1/2 1