Jquery 悬停时的动画效果不佳

Question

我创建了一个脚本，它在 mouseenter 时将 li 向左移动 40px，并在 mouseleave 时将其移回。它大部分时间都工作正常，但是它经常会出现故障，因此它会向左移动并且不会记录 mouseleave，因此它会保持在左侧 40px。然后当你再次鼠标输入时，它会再移动 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

我前段时间遇到过这个，你会想在调用.animate之前添加一个.stop()因为在我看来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)
});

Answer 2

因此，根据其他有用的答案，以下是对我有用的答案：

$(".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)
});

我使用了 marginLeft 而不是 'left'，这样它仍然可以在响应式布局中工作。我使用 finish() 来确保它会立即停止动画而不是多次排队动画。感谢大家的帮助！

Jquery 悬停时的动画效果不佳

Jquery animate left on hover not working perfectly

html

javascript

jquery

jquery-animate