JavaScript if語句幫助需要

Question

我使用JavaScript來實現預覽框時，懸停在列表上。我會告訴你我的代碼，然後給你一個關於它如何工作的實時網站，然後我會說這個問題。

HTML

<div id="content"> 

<div id="theDiv"><h1>Custom </h1></div> 

<div id="theDiv1"><h1>Custom One</h1> </div> 

<div id="theDiv2"><h1>Custom Two</h1></div> 

<div id="theDiv3"><h1>Custom Three</h1></div> 

<div id="theDiv4"><h1>Custom Four</h1></div> 

<div id="theDiv5"><h1>Custom Five</h1></div> 

<div id="theDiv6"><h1>Custom Six</h1></div> 

<div id="theDiv7"><h1>Custom Seven</h1></div> 


<ul id="nav"> 
    <li><a href="#"><b>Austria ></b></a> <br/> 
    <ul> 
     <li><a href="#" class="theLink">Factsheet </a></li><br/> 
     <li><a href="#" class="theLink1">Stylesheet </a></li><br/> 
     <li><a href="#" class="theLink2">References </a></li><br/> 
    </ul> 
    </li> 
    <li><a href="#"><b>Switzerland ></b></a> <br/> 
    <ul> 
     <li><a href="#" class="theLinka">Factsheet </a></li><br/> 
     <li><a href="#" class="theLinka1">Stylesheet </a></li><br/> 
     <li><a href="#" class="theLinka2">References </a></li><br/> 
    </ul> 
    </li> 
    <li><a href="#"><b>Explanation Page ></b></a> <br/> 
    <ul> 
     <li><a href="#" class="theLinkb">Stylesheet </a></li><br/> 
     <li><a href="#" class="theLinkb1">References </a></li><br/> 
    </ul> 
    </li> 
</ul> 



     </div> 

CSS

ul { 
    padding-left:10px; 
    list-style: none; 
    width:150px; 
} 


ul li { 
    position: relative; 
    left:10px; 
    width:148px; 
} 

li ul { 
    position: relative; 
    display:none; 
} 
/* Styles for Menu Items */ 
ul li a { 
    display:block; 
    text-decoration: none; 
    line-height:2em; 
    height:2em; 
    padding:0 5px; 
    color:#666; 
} 
a:hover {color:#999;} 
li ul li {width:139px; } 
li.on ul { display:block; } 
li.off ul{display:none; } 
.linkhover:hover {text-decoration:underline; } 
.linkxp:hover {text-decoration:underline; } 

#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4, #theDiv5, #theDiv6, #theDiv7, #theDiv8 { 
    padding:10px; 
    float:right; 
    margin:0px 50px 0 0; 
    width:300px; 
    height:500px; 
    border:1px solid #000; 
    display:none; 
} 

的JavaScript

$(window).load(function(){ 
$(".theLink").hover(
     function() { 
      $("#theDiv").fadeIn(); 
     }, 
     function() { 
      $("#theDiv").fadeOut(); 
     } 
    ); 
}); 

$(window).load(function(){ 
$(".theLink1").hover(
     function() { 
      $("#theDiv1").fadeIn(); 
     }, 
     function() { 
      $("#theDiv1").fadeOut(); 
     } 
    ); 
}); 

$(window).load(function(){ 
$(".theLink2").hover(
     function() { 
      $("#theDiv2").fadeIn(); 
     }, 
     function() { 
      $("#theDiv2").fadeOut(); 
     } 
    ); 
}); 

$(window).load(function(){ 
$(".theLinka").hover(
     function() { 
      $("#theDiv3").fadeIn(); 
     }, 
     function() { 
      $("#theDiv3").fadeOut(); 
     } 
    ); 
}); 

$(window).load(function(){ 
$(".theLinka1").hover(
     function() { 
      $("#theDiv4").fadeIn(); 
     }, 
     function() { 
      $("#theDiv4").fadeOut(); 
     } 
    ); 
}); 

$(window).load(function(){ 
$(".theLinka2").hover(
     function() { 
      $("#theDiv5").fadeIn(); 
     }, 
     function() { 
      $("#theDiv5").fadeOut(); 
     } 
    ); 
}); 

$(window).load(function(){ 
$(".theLinkb").hover(
     function() { 
      $("#theDiv6").fadeIn(); 
     }, 
     function() { 
      $("#theDiv6").fadeOut(); 
     } 
    ); 
}); 

$(window).load(function(){ 
$(".theLinkb1").hover(
     function() { 
      $("#theDiv7").fadeIn(); 
     }, 
     function() { 
      $("#theDiv7").fadeOut(); 
     } 
    ); 
}); 

這裏是一個實時取景的鏈接; http://tubebackgrounds.co.uk/uni/demo/explanation.html#

正如您所看到的，如果您在顯示時將鼠標懸停在列表樣式上太快，則會顯示其他樣式。我想知道是否有可能使用if語句，所以只有一個

$(window).load(function(){ 
$(".theLink").hover(
     function() { 
      $("#theDiv").fadeIn(); 
     }, 
     function() { 
      $("#theDiv").fadeOut(); 
     } 
    ); 
}); 

可以一次啓用嗎？或者可能是一種使fadeIn和fadeOut更快的方法。

Answer 1

部分只是你的CSS。你有你的每個div（#theDiv，＃theDiv1，＃theDiv2等）浮動在一起。所以當你隱藏一個，下一個會彈出它的位置。如果您將他們的顯示器設置爲顯示：block，您將設置我所說的內容。你真正想要的是那些div堆疊在一起，像一副紙牌，然後淡入淡出。要實現這個嘗試添加此CSS：

#content { 
    position:relative; 
} 
#theDiv, #theDiv1, #theDiv2, #theDiv3, #theDiv4,#theDiv5, #theDiv6, #theDiv7, #theDiv8 { 
    border: 1px solid #000000; 
    display: none; 
    height: 500px; 
    margin: 0 50px 0 0; 
    padding: 10px; 
    position: absolute; 
    right: 0; 
    width: 300px; 
} 

現在你的JavaScript應該工作正常。你可以通過使用@beerwin建議和使用回調使JavaScript更好一些。那樣的話，div淡入只會在前一個淡出的時候流逝

Answer 2

使用回調函數：這個問題的

$(window).load(function(){ 
    $(".theLink").hover(
    function() { 
     $("#theDiv").fadeOut(function(){ 
      $("#theDiv1").fadeIn(); 
     }); 
    }); 
});