質問内容
質問を評価する
(0ポイント)
|
JQuery初学者です。
リストをクリックすると一旦全てのdivをfadeoutさせたあとに、クリックしたものと対応するdivだけfadeinする、というイベントを考えて以下のようなスクリプトを書いたのですが、実際は消える・現れるの順序がバラバラになってしまいます。表示されているdivと違うdivを指定するメニューを押すと、フェードアウト前にまずdivが一瞬変わってしまいます。
色々試行錯誤してみたのですが、上手くいきません。
よろしければご指摘お願いいたします。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<style>
.mb20{
margin-bottom:20px;
}
#one{
width:500px;
height:500px;
background:#666;
clear:both;
}
#two{
width:500px;
height:500px;
background:blue;
}
#three{
width:500px;
height:500px;
background:pink;
}
ul {
list-style-type:none;
}
ul li{
float:left;
}
div#one,div#two,div#three{
display:none;*/
}
</style>
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script>
<script>
$(function(){
var list = $("ul.menu a");
list.click(function(){
var menu = $(this);
var contents = $(menu.attr('href'));
$("#contents div").fadeOut(3000,function(){
contents.fadeIn(2000);
});
});
});
</script>
</head>
<body>
<ul class="menu">
<li><a href="#one">one</a></li>
<li><a href="#two">two</a></li>
<li><a href="#three">three</a></li>
</ul>
<div id="contents">
<div id="one" class="mb20"></div>
<div id="two" class="mb20"></div>
<div id="three" class="mb20"></div>
</div>
</body>
</html>
|
