日期:2014-05-16  浏览次数:20316 次

问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()就可以