クリックすると div をフェードインさせようとしています。次に、この div 内にネストされた div をクリックすると、最初の div がフェードアウトします。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');
});
});