Question

最后几天我一直试图用jQuery动画创建一个侧边栏，但是可能出现了问题，似乎有点破坏而且没有完全正常工作，因为#navigation（div）有时甚至不会消失，它可能取决于我让我的鼠标离开div的地方，因为它只在某些地方消失。我在代码结果中发现的另一件事/问题是，当你多次反复击中左角时，＃导航会不断出现并一遍又一遍地消失，就像我已经到达角落一样多。我怎样才能解决这些微不足道的问题呢？

以下是我今天写的代码：

<div id="navigation">
    <div id="hidden">
        <h3>Navigation</h3>
        <hr></hr>
        <a href="#">Blog</a>
        <a href="#">Live</a>
        <a href="#">Events</a>
        <a href="#">Genres</a>
        <a href="#">The team</a>
        <a href="#">Changelog</a>

        <div class="userpanel">
            <a href="#">Sign in</a>
            <a href="#">Sign up</a>
        </div>
    </div>
</div>

<script type="text/javascript">
$("#navigation").mouseover(function(){
    $(this).animate({
        width: '300px',
        opacity: '1',
    }, 400);
    $("#hidden").css({
        display: 'block',
    });
});

$("#navigation").mouseleave(function(){
    $(this).animate({
        width: '5px',
        opacity: '0.0',
    }, 400);
    $("#hidden").css({
        display: 'none',
    });
});
</script>

嗯......这是CSS：

#navigation {width: 5px; height: calc(100vh - 50px); background: #171C21; opacity: 0.0; padding-top: 10px; padding-bottom: 10px;}
#navigation #hidden {width: 90%; margin: auto; height: 100%; display: none; text-align: center;}
#navigation #hidden > h3 {color: #FFFFFF; text-transform: uppercase;}
#navigation #hidden a {width: 200px; color: #FFFFFF; text-decoration: none; display: block; padding-top: 2px; padding-bottom: 2px; text-transform: uppercase; font-size: 14px; margin: auto;}
#navigation #hidden a:hover {color: #8e44ad;}
#navigation .userpanel > a {font-size: 16px; font-weight: 600;}

我正在使用这个版本的jQuery：

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

预览：http://awesomeness.adam.zur.io/（点击屏幕左侧）

Answer 1

似乎你不打算使用 .stop() 停止当前动画，因为当鼠标输入/离开并缓存它时它会出现故障。因为你应该将mousemove改为mouseenter，因为它只会触发一次事件。

$("#navigation").mouseenter(function(){
    $(this).stop().animate({
        width: '300px',
        opacity: '1',
    }, 400);
    $("#hidden").css({
        display: 'block',
    });
});

$("#navigation").mouseleave(function(){
    $(this).stop().animate({
        width: '5px',
        opacity: '0.0',
    }, 400);
    $("#hidden").css({
        display: 'none',
    });
});

working code

Answer 2

尝试使用此代码（请参阅此 PEN ），只需添加类is-showing并使用css设置样式，并在悬停导航时使用jquery将此类添加到navigation

#navigation {
  width: 300px; 
  height: calc(100vh - 50px); 
  background: #171C21; 
  padding-top: 10px; 
  padding-bottom: 10px;
  transition: all 0.7s ease-in-out;
  transform: translateX(-100%);
  opacity:0
}
#navigation.is-showing{
  transform: translateX(0);
  opacity: 1
}

JS：

$('#navigation').hover(function(){
  $(this).toggleClass('is-showing')
})

jQuery破碎的动画 - Div有时不会消失

2 个答案: