Question

我不知道为什么侧边栏会无意中移动。我正在创建一个固定的侧边栏，仅在悬停时显示。

当我慢慢地将鼠标指向父div #containter元素时，它工作正常，但是当我在父div元素#containter上移动鼠标几次时，div显示并隐藏像疯了一样。并且还有一个父div显示的区域，即使你实际上并没有在父div上徘徊。

我正在使用此代码。

HTML

<div id="containter"><!-- parent div -->
  <div class="wrapdownload">
    <a href="#"></a>
  </div>
  <div class="wrapdownload">
    <a href="#"></a>
  </div>
  <div class="wrapdownload">
    <a href="#"></a>
  </div>
</div>

CSS

#containter {
  width: 140px;
  height: 282px;
  position: fixed;
  margin-top: 30px;
  left: -104px;
  border: 1px solid red;
}

.wrapdownload {
  width: 100px;
  height: 90px;
  border: 2px solid black;
}

JAVASCRIPT

$(document).ready(function() {
  $("#containter").mouseenter(function(event) {
    $("#containter").animate({
      left: "1px"
    });
  });

  $("#containter").mouseleave(function(event) {
    $("#containter").animate({
      left: "-104px"
    });
  });
});

当你将父div悬停六次时，div也会显示6次。我只是希望它显示当鼠标指向div元素时，如果我将鼠标移动到父div之外，它必须隐藏。

以下是jsfiddle https://jsfiddle.net/py0622ms/6/

上的示例

Answer 1

使用stop()方法：

$(document).ready(function() {
  $("#containter").mouseenter(function(event) {
    $("#containter").stop().animate({
      left: "1px"
    });
  });

  $("#containter").mouseleave(function(event) {
    $("#containter").stop().animate({
      left: "-104px"
    });
  });
});

工作小提琴：

https://jsfiddle.net/py0622ms/7/

Jquery .animate无意中发挥作用

1 个答案: