JQuery动作链

Question

我有一系列运作良好的行动：
1-单击红色。红色动画下来和灰色动画上升
2-单击背景（html）灰色下降，红色上升

问题出现在用户（偶然）点击背景然后红色时。在这种情况下，它会变为1,2，之后：

3-红色上升

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

请检查您的回答here

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;
}

JQUERY：

$(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/