Question

我正在尝试创建一个JQuery滑块，但我遇到了障碍。我是Javascript和JQuery的新手。这是我的代码 -

<!DOCTYPE html>
<html>
  <head>
    <title>Experimentation</title>
    <style type="text/css">

#container {
overflow: hidden;
height: 200px;
width: 200px;
}   

#box {
  width: 200px;
  height: 200px;
  background-color: gray;
  z-index: 10000;
  position: relative;
  }


#information {
  position: absolute;
  width: 200px;
  height:200px;
  background-color: black;
  opacity: 0.2;
  top: 150px;
  color: #FFF;
}

#information h3 {
 margin: 3px 3px; 
 text-align: center;
}

    </style>
    <script type="text/javascript" src="jquery-1.4.js"></script>
    <script type="text/javascript">
      var topInitial = "0";
      var topAfter = "150px";

      $(function() {

      /*
      $("#box").mouseover(function(){
      $("#information").css("top",topInitial); }); 


      $("#box").mouseout(function() {
      $("#information").css("top",topAfter); });      
      });
      */

      $("#box").mouseover(function() {  
      $("#information").animate({
      top: 0 }, "slow"); });

      $("#box").mouseout(function() {
      $("#information").animate({
      top: 150 }, "slow"); });

      //New Code
      $("#container").click(function() {
  $("#container").animate({
  margin-left: 30}, "slow"); });

     });
    </script>
  </head>

  <body>

  <div id="container">
  <div id="box">
  <div id="information">
  <h3> Criminal Penguins Having a Ball </h3>
  <p> You have never seen something like this before!</p>
  </div>
  </div>
  </div>

  </body>
</html>

我的问题是，鼠标悬停事件多次发生。有人能告诉我如何纠正这个问题吗？另一个重要的问题，因为我只是开始编码，我相信我将来也会遇到一些障碍。我应该用修改后的代码创建一个新线程还是编辑这个线程工作？请帮忙！：）

更新：我刚刚在我的Javascript中添加了一些新代码。我想将元素向右移动30px。这是完成此任务的方法吗？

Answer 1

使用mouseenter代替mouseover。鼠标输入一旦进入元素就会被调用。

更改您的功能，如下所示

   $("#box").mouseenter(function() {  
      $("#information").animate({
        top: 0 }, "slow"); 
   });

您也可以像下面那样更改脚本

  $("#box").mouseenter(function() {  
     $("#information").animate({
     top: 0 }, "slow"); 
  }).mouseleave(function() {
     $("#information").animate({
     top: 150 }, "slow"); 
  });

您可以阅读所有jQuery鼠标事件here

JQuery鼠标事件多次发生，只需要一次

1 个答案: