jquery - JQuery 动作链

Question

我有一系列运作良好的操作：
1- 点击红色。红色动画向下和灰色动画向上
2- 单击背景 (html) 灰色向下和红色向上

当用户（意外）单击背景然后单击红色时，问题就出现了。在这种情况下，它是 1、2 和之后：

3-红色上升

我不明白为什么会发生此步骤 3 以及如何避免它？

请在此处查看您的答案

HTML：

<div id="red"></div>   
<div id="grey"></div>

CSS：

#red {
    position: fixed;
    bottom: 20px; right: 25px;
    width:80px; height:50px;
    cursor:pointer; 
    background:red;
}

#grey{
    position:fixed;
    bottom:-40px;
    width:100%; height:40px;
    background:grey;
}

查询：

$(function(){   
    $("#red").click(function(event) {
        event.stopPropagation();
        $("#red").animate({bottom:'-80px'},1000);

        setTimeout(function () {
        $("#grey").animate({bottom:'0px'}, 500);
        }, 700);
    });

    $("html").click(function() {
        $("#grey").animate({bottom:'-40px'}, 800);

        setTimeout(function () {
        $("#red").animate({bottom:'20px'}, 1000);
        }, 500);

    }); 
})

Answer 1

利用.stop()

$(function(){
    $("#red").click(function(event) {
        event.stopPropagation();
        $("#red").stop().animate({bottom:'-80px'},1000);

        setTimeout(function () {
        $("#grey").stop().animate({bottom:'0px'}, 500);
        }, 700);
    });

    $("html").click(function() {
        $("#grey").stop().animate({bottom:'-40px'}, 800);

        setTimeout(function () {
        $("#red").stop().animate({bottom:'20px'}, 1000);
        }, 500);    
    }); 
})

演示--> http://jsfiddle.net/WG3md/2/