0
スクリプトに問題があります（jQueryで初めて試しました）。navメニューを使用してdivで消えるように書いています。ユーザーがナビゲーションメニューの異なるボタンをすばやくクリックすると、両方のdivが互いに重なり合って読み込まれます。ここで複数のdivのfadeInを引き起こすnavメニューの高速クリック
はコードです：ここでは
$(document).ready(function(){
$("#about-button").css({
opacity: 0.3
});
$("#contact-button").css({
opacity: 0.3
});
$("#friends-button").css({
opacity: 0.3
});
$("#gallery-button").css({
opacity: 0.3
});
$("#container div.button").click(function(){
$clicked = $(this);
if($clicked.css("opacity") != "1" && $clicked.is(":not(animated)"))
{
$clicked.animate({
opacity: 1,
}, 600);
var idToLoad = $clicked.attr("id").split('-');
$("#content").find("div:visible").fadeOut("slow", function(){
$(this).parent().find("#"+idToLoad[0]).fadeIn("slow")
})
}
$clicked.siblings(".button").animate({
opacity: 0.3,
}, 600);
});
});
はdiv要素やボタンのスタイルです：
#container{
width: 996px;
height: 1050px;
background-image: url(images/bg.png);
background-repeat: no-repeat;
position: relative;
background-position: center top;
margin: 0px auto 0px auto;
}
#navbar {
width: 150px;
height: 300px;
position: absolute;
top: 250px;
left: 100px;
z-index: 2;
visibility: visible;
}
#about {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
overflow: auto;
}
#footer {
top: 950px;
height: 80px;
position: absolute;
color: #ffffff;
padding: 10px;
width: 988px;
text-align: right;
}
#contact {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#friends {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none
}
#gallery {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:none;
}
#home {
height: 400px;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
color: #fff;
text-align: left;
padding: 0px 0px 0px 30px;
width: 650px;
z-index: 3;
left: 250px;
top: 250px;
display:block;
overflow: auto;
padding-right: 10px;
}
#home-button {
opacity: 1.0;
}
#about-button {
opacity: 0.5;
}
#contact-button {
opacity: 0.5;
}
#friends-button {
opacity: 0.5;
}
#gallery-button {
opacity: 0.5;
}
.button{
cursor: pointer;
}
#header{
top: 150px;
position: absolute;
left: 115px;
visibility: visible;
height: 100px;
HTMLのマークアップが正しいはずです、コンテンツのいずれかの内部には、子のdivはありません私は見つけることができる他の紛争はありません。
div：visibleが表示されるまで、メニューのクリックを無効にする方法はありますか？もし誰かがその修正や他の修正の答えを持っていれば、本当にそれを見たいと思います！これはこれまでサイトで見つかった唯一のバグです。
ありがとうございます！