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


<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>以上是问题代码，我在停止按钮中，停止了第一个动画，立刻执行后面的俩个，这个是没问题的，但为什么后面的执行完，又继续执行第一个未执行的效果呢？