Question

我创建了一个脚本，将li移动到mouseenter上的左侧40px并在mouseleave上将其移回。它在大多数情况下工作正常，但是它经常会出现故障，因此它向左移动并且不记录鼠标，因此它将保持向左40px。然后当你再次进入mouseenter时，它会再移动40px。最终会出现一个未对齐的列表。

未对齐列表图片 -

这是html和jquery：

$(document).ready(function(){
  $(".work ul li a").on("mouseenter", function() {
    $(this).animate({
      left: "-=40px",
    }, 200)
  });
  $(".work ul li a").on("mouseleave", function() {
    $(this).animate({
      left: "+=40px",
    }, 200)
  });
  $("#darl").on({ 
    mouseenter: function() {
      $("#bgimg1").fadeIn(200);
    },
    mouseleave: function() {
      $("#bgimg1").fadeOut(200);
    }
  });
  $("#chil").on({ 
    mouseenter: function() {
      $("#bgimg2").fadeIn(200);
    },
    mouseleave: function() {
      $("#bgimg2").fadeOut(200);
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
  <h1 class="heading">Selected Projects</h1>
  <div class="line"></div>
  <ul>
    <li id="darl">
      <div class="container2"><div class="block">
        <img class="bg-image"  id="bgimg1" src="Images/perspective2final2pfolio2.jpg">
        </div></div>
      <a href="">1. Darlington Terrace</a>
    </li>

    <li><div class="thinline"></div></li>
    <li id="chil">
      <div class="container2"><div class="block">
        <img class="bg-image"  id="bgimg2" src="Images/DSC_0756.jpg">
        </div></div>
      <a href="">2. Children's Playground</a>
    </li>

    <li><div class="thinline"></div></li>
    <li>
      <div class="container2"><div class="block">
        <img class="bg-image"  id="bgimg3"src="Images/perspective2final2pfolio2.jpg">
        </div></div>
      <a href="">3. Lawn Bowl Bakery Bridge</a>
    </li>

    <li><div class="thinline"></div></li>
    <li>
      <div class="container2"><div class="block">
        <img class="bg-image"  id="bgimg4"src="Images/perspective2final2pfolio2.jpg">
        </div></div>
      <a href="">4. Aqueduct: Museum of Architecture</a>
    </li>

    <li><div class="thinline"></div></li>
    <li>
      <div class="container2"><div class="block">
        <img class="bg-image"  id="bgimg5"src="Images/perspective2final2pfolio2.jpg">
        </div></div>
      <a href="">5. Velocity Frequent Flyer Website</a>
    </li>

    <li><div class="thinline"></div></li>
  </ul>

</div>

这是github回购：https://github.com/mingweichan/CVwebsite

Answer 1

基于其他有用的答案，这对我有用：

$(".work ul li a").on("mouseenter", function() {
    $(this).finish().animate({
        marginLeft: "-40px",
    }, 200)
});
$(".work ul li a").on("mouseleave", function() {
    $(this).finish().animate({
        marginLeft: "0px",
    }, 200)
});

而不是＆＃39; left＆＃39;我使用marginLeft，以便它仍然可以在响应式布局中工作。我使用finish（）来确保它会立即停止动画，而不是多次排队动画。感谢所有帮助人员！

Answer 2

我之前遇到过这个问题，你需要在调用.stop()之前添加.animate，因为在我看来，jQuery会注册每个事件并将它们放入堆栈并遍历堆栈中的每个项目。

换句话说，如果您将鼠标快速移出和移出元素10次，事件将会触发10次。

但是对于你的情况添加一个.stop()将解决一个问题但是因为你使用亲戚值来设置left属性的动画，它似乎不会在下一个事件被触发之前完成动画。我建议使用绝对值：

$(".work ul li a").on("mouseenter", function() {
  $(this).stop().animate({
      left: "-40px",
  }, 200)
});
$(".work ul li a").on("mouseleave", function() {
  $(this).stop().animate({
      left: "0px",
  }, 200)
});

Jquery动画片悬停时悬停不完美

2 个答案: