Question

我有两个div元素，当鼠标进入div1时，div2应该向下滑动，当鼠标离开div1时，div2应该向上滑动。

但是，在我的功能中，滑动功能无法正常工作

下面是我的代码：

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#text1").mouseenter(function(){      
        $("#text2").slideDown("slow");

    });
$("#text1").mouseleave(function(){      
        $("#text2").slideUp("slow");

    });
});
</script>

<style> 
#text1 {
    border:2px solid #ff0000;
    width:100px;
    height:100px;
    text-align:center;
    background-color: #9FF;
    position:relative;
}
#text2 {
display: none;
    border:2px solid #ff0000;
    width:100px;
    height:100px;
    text-align:center;
    background-color: #FF0;
    position:absolute;
    top:8px;
    left:8px;

}

</style>
</head>
<body>

<div id="text1">text</div>
<div id="text2">video</div>

</body>
</html>

请帮助解决这个问题。谢谢。

Answer 1

除了代码的其他部分之外，您还需要使用.stop()。即。

$("#text2").stop(true).slideDown("slow");

停止匹配元素上当前正在运行的动画。

＆＃13;

$(document).ready(function() {
  $("#text1").mouseenter(function() {
    $("#text2").stop(true).slideDown("slow");

  }).mouseleave(function() {
    $("#text2").stop(true).slideUp("slow");
  });
});

＆＃13;

#text1 {
  border: 2px solid #ff0000;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #9FF;
  position: relative;
}
#text2 {
  display: none;
  border: 2px solid #ff0000;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #FF0;
  position: absolute;
  top: 8px;
  left: 8px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id="text1">text</div>
<div id="text2">video</div>

＆＃13;

Answer 2

您可以使用 stop() 来停止当前正在运行的动画。此外，您需要将mouseleave事件绑定到两个div并检查鼠标是否在#text2或{{ 1}}使用** is()

＆＃13;

#text1

＆＃13;

$(document).ready(function() {
  var text2 = $("#text2"),
    text = $("#text1");
  text.mouseenter(function() {
    text2.stop().slideDown("slow");
  })
  $("#text1,#text2").mouseleave(function() {
    if (text2.is(':not(:hover)')&&text.is(':not(:hover)'))
      text2.stop().slideUp("slow");
  });
});

＆＃13;

#text1 {
  border: 2px solid #ff0000;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #9FF;
  position: relative;
}
#text2 {
  display: none;
  border: 2px solid #ff0000;
  width: 100px;
  height: 100px;
  text-align: center;
  background-color: #FF0;
  position: absolute;
  top: 8px;
  left: 8px;
}

＆＃13;

Answer 3

我得到了解决方案。感谢您的所有时间和帮助。

以下是解决方案：

$(document).ready(function(){
    $("#text1").hover(function(){      
        $("#text2").slideDown("slow");

    });
$("#text2").mouseleave(function(){      
        $("#text2").slideUp("slow");

    });
});

slideDown函数无法正常工作

3 个答案: