JQuery FadeOut анимация затем возвращение

Я пытаюсь сделать div fadeIn при нажатии, затем при нажатии на элемент div, вложенный в этот div, начальный div fadesOut. Работает хорошо до тех пор, пока не доходит до части fadeOut jQuery, сначала исчезает, но потом возвращается.

Вот 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 для демонстрации

Источник

1 ответ

Решение

Щелчок по вложенному элементу также вызывает щелчок по родительскому элементу, который называется распространением.

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

    $('.exit').click(function(e){
        e.stopPropagation();
        $('.boxinfo').fadeOut('slow');
    });
});
Источник
Другие вопросы по тегам