JQuery 작업 체인

Question

나는 잘 작동하는 일련의 동작을 가지고 있습니다.
1- 빨간색을 클릭하십시오. 빨간색 애니메이션 및 회색 애니메이션
2- 배경 (html)을 클릭하면 회색이 내려 가고 빨간색이 나타납니다.

사용자가 우연히 배경을 클릭 한 다음 빨간색을 클릭하면 문제가 발생합니다.

3 레드가

내가 왜 3 단계 일어나는가 이해하지 못하는 방법을 방지하기 위해 이동 :이 경우에는 1, 2, 그 후 간다?

답변 확인하시기 바랍니다 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 :,333,375,383의

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

메이크업 사용 누군가가 배경 다음 빨간색을 클릭하면210

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