jquery动画的意外行为

Question

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

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>

CSS

.sidebar{
    position:fixed;
    height:100%;
    width:200px; 
    top:0;
    left:0;
    z-index: 100;
}

.block{
    width:5%;
    height: 20px;
    border-style: solid;
    border-width: 1px;
    text-indent: 100%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    background-color: red;
    padding: 10px;
}

.link{
    text-indent: 100%;
    text-align: right;
    white-space: nowrap;
    width:100%;
    height: 100%;
}

#slider {
    border:1.5px solid black;
    width:10px;
    position:fixed;
}

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：http://jsfiddle.net/znxygpdw/

我怎样才能防止这种情况发生？

Answer 1

这种情况下最好使用hover函数：

//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%");
});

小提琴：https://jsfiddle.net/lmgonzalves/znxygpdw/1/

Answer 2

如上所述，最好使用悬停功能。但是，您的问题在于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%");
    });

http://jsfiddle.net/znxygpdw/4/