jQuery fadeOut動畫然後返回

我試圖做一個div fadeIn單擊時，然後當嵌套在這個div內的div點擊最初的div fadesOut。直到涉及到jQuery的fadeOut部分時，它的工作情況良好，最初它會消失，但隨後會返回。jQuery fadeOut動畫然後返回

繼承人的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動畫然後返回

回答

相關問題