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

因此，看起来您可能更习惯于强类型语言(如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 2

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

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