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等......）彼此相邻。所以当你隐藏一个时，下一个会弹出它的位置。如果你设置他们的显示器显示：阻止你将设置我说的。你真正想要的是将那些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();
        });
    });
});

JavaScript if语句帮助需要

2 个答案: