jQuery fadeOut 애니메이트 후 돌아 가기

클릭하면 div fadeIn을 만들려고합니다.이 div 내에 중첩 된 div가 클릭되면 초기 div fadesOut가 클릭됩니다. 그것은 jQuery의 fadeOut 부분에 올 때까지 잘 작동합니다. 처음에는 사라졌지만 반환됩니다.jQuery fadeOut 애니메이트 후 돌아 가기

을 heres HTML

<html> 
<head> 
    <title>Kapow!</title> 
    <link rel='stylesheet' type='text/css' href='stylesheet.css'/> 
    <script type='text/javascript' src='script.js'></script> 
</head> 
<body> 
     <div class = "box"> 
      <div class = "boxinfo"> 
      <div class = "exit"></div> 
      </div> 
     </div> 
</body> 
</html>

CSS의 :

.box { 
    height: 100px; 
    width: 100px; 
    background: yellow; 
    margin: auto; 
    text-align: center; 
} 

.boxinfo { 
    height: 300px; 
    display: none; 
    width: 200px; 
    background: green; 
    margin: auto; 
} 

.exit { 
    height: 25px; 
    width: 25px; 
    background: red; 
    margin-top: 50px; 
    float: right; 
}

그리고 jQuery를 : 중첩 된 요소의 데모

$(document).ready(function(){ 
    $('.box').click(function(){ 
    $('.boxinfo').fadeIn();  
    }); 
}); 

$(document).ready(function(){ 
    $('.exit').click(function(){ 
    $('.boxinfo').fadeOut('slow'); 
    $('.exit').fadeOut('slow'); 
    }); 
});

http://codepen.io/anon/pen/xujyb

출처

2013-07-16 Minum

codepen 코드에 js가 없습니다. –

클릭 또한 상위 요소에 대한 클릭을 발생시킵니다. 전파라고합니다.

$(document).ready(function(){ 
    $('.box').click(function(){ 
     $('.boxinfo').fadeIn();  
    }); 

    $('.exit').click(function(e){ 
     e.stopPropagation(); 
     $('.boxinfo').fadeOut('slow'); 
    }); 
});

출처

2013-07-16 09:14:08 adeneo

완벽하게 작동합니다. 그러나 첫 번째 작업이 중지됩니다. 이것은 이미지를 클릭하면 정보 등을 불러오는 이미지의 갤러리 뷰어 일 것입니다. 불편을 호소합니다. – Minum

첫 번째 이벤트 처리기를 멈출 수는 없습니까? 다른 요소는 모두 함께 사용하고 있습니까? – adeneo

도움을 많이 주셔서 감사합니다. – Minum

jQuery fadeOut 애니메이트 후 돌아 가기

답변

관련 문제