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

FIDDLE：https://jsfiddle.net/lmgonzalves/znxygpdw/1/

Answer 2

如上所述，最好使用悬停功能。但是，问题在于scanelf函数，当您将鼠标悬停在阻止事件触发的链接上时。要解决此问题，请改用mouseout函数。

mouseleave

jquery动画的意外行为

2 个答案: