Question

我试图在点击时创建一个div fadeIn，然后当点击嵌入此div中的div时，初始div fadesOut。它一直运行良好，直到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用于演示

Answer 1

单击嵌套元素也会触发父元素上的单击，称为传播。

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

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

jQuery fadeOut动画然后返回

1 个答案: