Question

我是jquery的新手，我的脚本的一部分有问题。基本上当鼠标悬停在按钮上时我正在制作下拉div，但是div开始像疯了一样上下移动。这就是我所做的：`

<script type="text/javascript">
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
        $("#drop1").slideDown();

});
$("#first").mouseout(function(){

     $("#drop1").slideUp();

  });
});

我也尝试使用布尔变量，但它给了我错误。

 <script type="text/javascript">
$(document).ready(function(){
public var boolean opened = false;
$("#drop1").slideUp();
$("#first").mouseover(function(){
    if(!opened){
        $("#drop1").slideDown();
        opened = true;
    }
});
$("#first").mouseout(function(){
     if(opened){
     $("#drop1").slideUp();
     opened = false;
     }
  });
});

如果你愿意，这里是HTML，但我认为一切都还可以。

<link rel="stylesheet" type="text/css" href="design.css">
 <div  id="first" style="position: absolute; left: 0px;">
     <a class="btn" href = "TheShooter/Launcher.exe" ><b>LAN shooter project</b></a>

   <div id="drop1">
     <a href = "TheShooter/index.php"><em>shooter project main page</em></a>                  <br/>
       info: Local Area Network multiplayer game, made with unity. Project                not finished yet, but sometimes fun to play. <br/>
     controls: walking: w,a,s,d<br/>
    shoot: LMB.<br/>
    zoom: RMB.
    </div>
    </div>

感谢您的帮助。

- 尼克

Answer 1

嗨，请参考这个应该回答你问题的小提琴。无需添加任何布尔值或条件检查：

<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>

和js

$(document).ready(function(){
  $("#wrap").mouseover(function(){
   $("#video").stop().slideDown("slow");
  });
  $("#wrap").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });

和css

    #text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
border: 1px solid #000;
}

#video
{
display:none;
width:1024px;
height:278px;
border: 1px solid #000;
}

Answer 2

所以看起来你可能更习惯像C＃这样的强类型语言。 JavaScript及其库jQuery是松散类型的，这意味着您不会声明范围或类型。以上代码清理了一下，使用了正确的语法并解决了您所看到的问题：

$(document).ready(function(){
    var opened = false;
    // Instead of sliding this up, give the #drop1 element
    // a property of display: none; to start - then remove the line below
    $("#drop1").slideUp();
    $("#first").mouseover(function(){
      if(!opened){
        // Below, I'm using a callback, which means the boolean
        // won't update to true until after the animation is finished
        $("#drop1").slideDown(400, function() {
          opened = true;
        });
      }
    })// Since it's the same element, we can chain events
    .mouseout(function(){
      if(opened){
        // Another callback
        $("#drop1").slideUp(400, function() {
          opened = false;
        });
      }
    }
  });
});

如果您对上述内容有任何疑问，请与我们联系！

Answer 3

我认为你应该尝试这样的事情：

$(document).ready(function() {
   $("#first").mouseover(function(){
     $("#drop1").slideDown("slow");
 });
 $("#first").mouseout(function(){
      $("#drop1").slideUp("slow");
  });
});

有关详细信息，请参阅上面的示例，来自jQuery官方文档：

http://api.jquery.com/mouseover/

http://api.jquery.com/mouseout/

Answer 4

这是实例的另一个答案，

＆＃13;

 

   $(document).ready(function(){
        $("#drop1").mouseover(function(){
            $("#first").slideDown("slow");
        });
        $("#drop1").mouseout(function(){
         $("#first").slideUp("slow");
      });
    });

＆＃13;

   

 #first, #drop1 {
        padding: 5px;
        text-align: center;
        background-color: #acacac;
        border: solid 1px #c3c3c3;
    }

    #first {
        padding: 50px;
        display: none;
        background-color: skyblue;
    }

＆＃13;

  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <div id="drop1">Mouse over on panel to slide down</div>
    <div id="first">Hello Stackoverflow ..!</div>

＆＃13;

jquery slideDown，slideUp wiggling

4 个答案: