首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

问1个简单的JQuery的animate的有关问题

2012-04-26 
问1个简单的JQuery的animate的问题HTML codehtml xmlnshttp://www.w3.org/1999/xhtmlheadtitle停

问1个简单的JQuery的animate的问题

HTML code
<html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>停止普通的多动画</title>    <style type="text/css">        *        {            margin: 0;            padding: 0;        }        body        {            padding: 60px;        }        #panel        {            position: relative;            width: 100px;            height: 100px;            border: 1px solid #0050D0;            background: #96E555;            cursor: pointer;        }    </style>    <script src="../../../JS/jquery-1.4.2.js" type="text/javascript"></script>    <script language="javascript" type="text/javascript">        $(document).ready(            function() {                $("#panel").css("opacity", "0.5");                $("#btnStart").click(                    function() {                        $("#panel").animate({ left: "400px", height: "200px", opacity: "1" }, 3000)                        .animate({ top: "200px", width: "200px" }, 3000)                        .fadeOut("slow");                    }                );                $("#btnStop").click(                    function() {                        $("#panel").stop().animate({ left: "400px", height: "200px", opacity: "1" }, 3000)                    }                );            }        );    </script></head><body>    <div id="panel">    </div>    <input id="btnStart" type="button" value="start" />    <input id="btnStop" type="button" value="stop" /></body></html>

以上是问题代码,我在停止按钮中,停止了第一个动画,立刻执行后面的俩个,这个是没问题的,但为什么后面的执行完,又继续执行第一个未执行的效果呢?

[解决办法]
$("#panel").stop().animate({ left: "400px", height: "200px", opacity: "1" }, 3000)
这句话错误了,直接 $("#panel").stop()就可以
[解决办法]
探讨

$("#panel").stop().animate({ left: "400px", height: "200px", opacity: "1" }, 3000)
这句话错误了,直接 $("#panel").stop()就可以

热点排行