javaScript如果需要帮助

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。您的每个divs（#thediv，＃thediv1，＃thediv2，等...）彼此相邻。因此，当您隐藏一个时，下一个将弹出位置。如果您将其显示能力设置为显示：Block，您将设置我的意思。您真正想要的是那些Divs被堆叠在另一个上面，例如一张卡片牌，然后褪色，然后进出。为了实现此功能，请尝试添加此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变得更好。这样，一旦前一个淡出

Answer 2

使用回调函数：

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