Javascript jquery动画的意外行为

所以我制作了这个动画侧边栏：

HTML

<div class="sidebar">
    <div class="block"><a class="link" href="#link1">Menu Option 1</</div>
    <div class="block">Menu Option 2</div>
    <div class="block">Menu Option 3</div>
    <div class="block">Menu Option 4</div>
</div>

jQuery

//Sidbar Animations
$(".block").mouseover(function() {
  $(this)
    .animate({
      width: "90%"
    }, {
      queue: false,
      duration: 400
    }).css("text-indent", "0");
});
$(".block").mouseout(function() {
  $(this)
    .animate({
      width: "5%"
    }, {
      queue: false,
      duration: 500
    }).css("text-indent", "100%");
});

这是可行的，但并不完全如预期的那样。 因此，如果我在div中添加链接，它仍然会被设置动画，但有时动画会中断，div会崩溃，并且很难实际单击链接

JSFiddle：

---

如何防止出现这种情况？

在这种情况下，最好使用

悬停功能：

//Sidbar Animations
$(".block").hover(function() {
    $(this)
    .animate({
        width: "90%"
    }, {
        queue: false,
        duration: 400
    }).css("text-indent", "0");
}, function() {
    $(this)
    .animate({
        width: "5%"
    }, {
        queue: false,
        duration: 500
    }).css("text-indent", "100%");
});

小提琴：如上所述，最好使用悬停功能。但是，问题在于
mouseout
函数，当您将鼠标悬停在带有块的链接上时，事件将被触发。要解决此问题，请改用
mouseleave
功能

//Sidbar Animations
    $(".block").mouseover(function() {
      $(this)
        .animate({
          width: "90%"
        }, {
          queue: false,
          duration: 400
        }).css("text-indent", "0");
    });
    $(".block").mouseleave(function() {
      $(this)
        .animate({
          width: "5%"
        }, {
          queue: false,
          duration: 500
        }).css("text-indent", "100%");
    });

您是否使用回调函数创建折叠动画？Hover使用两个函数作为参数，分别是“mouseenter”和“mouseleave”的别名。每次鼠标悬停链接时，都会触发mouseout。很好的解释，顺便说一句，您忘记在JSFIDLE链接中将
mouseout
替换为
mouseleave
//Sidbar Animations
    $(".block").mouseover(function() {
      $(this)
        .animate({
          width: "90%"
        }, {
          queue: false,
          duration: 400
        }).css("text-indent", "0");
    });
    $(".block").mouseleave(function() {
      $(this)
        .animate({
          width: "5%"
        }, {
          queue: false,
          duration: 500
        }).css("text-indent", "100%");
    });