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(); 
     }); 
    }); 
});