jQuery slideDown，slideUp摇摆

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

这是另一个带有现场示例的答案，

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

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

 <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>