Javascript-JQuery：从左到右滑动菜单？

Question

我将一段文本放在浏览器之外，我希望它在光标悬停在另一段文本上时显示。这是我的代码：

HTML 文件

<div class="panel_help">
        <div class="help_text">
            <h4>Τι κάνω?</h4>
            <p>This is the text that is hidden and needs to appear...</p>
        </div>
        <p class="slide_help"><strong>Show text</strong></p>
    </div>

CSS 文件

  .help_text {
    color: aliceblue;
    display:block;
    position:fixed;
    right: -9em;
    top: 6em;
    width:150px;
    height:20px;
    font-size: 18px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}

.slide_help {
    color: aliceblue;
    right: 10px;
    top: 4.5em;
    position: fixed;
    font-size: 150%;
}

JS文件

$(".panel_help").mouseenter(function() {
        $(".help_text").animate({right: "1.5em"},'slow');
        $(".slide_help").animate({right: "9em"}, 'slow');
});

$(".panel_help").mouseleave(function() {
    $(".help_text").animate({right: "-9em"},'slow');
    $(".slide_help").animate({right: "1em"}, 'slow');
});

问题是有时需要两个动画才能停止，所以左-右-左-右，然后停止！难道我做错了什么？我是 JQuery 的新手...谢谢！

Answer 1

只需在 animate(...) 之前添加 .stop() 即可停止当前动画：

$('.panel_help').mouseenter(function() {
    $('.help_text').stop().animate({right: '1.5em'}, 'slow');
    $('.slide_help').stop().animate({right: '9em'}, 'slow');
});

$('.panel_help').mouseleave(function() {
    $('.help_text').stop().animate({right: '-9em'}, 'slow');
    $('.slide_help').stop().animate({right: '1em'}, 'slow');
});

.stop() | jQuery API Documentation

Answer 2

删除 JavaScript / jQuery 并使用 CSS。

.help_text {
    right: -9em;
}
.slide_help {
    right: 1em; 
}

.help_text, .slide_help {
    -webkit-transition: right 0.4s linear;
    -moz-transition: right 0.4s linear;
    -ms-transition: right 0.4s linear;
    -o-transition: right 0.4s linear;
    transition: right 0.4s linear;
}

.panel_help:hover .help_text {
    right: 1.5em;
}

.panel_help:hover .slide_help {
    right: 9em;
}

这样您就不会使用 jQuery 事件，这些事件有时无法正常工作

Answer 3

问题是您需要在鼠标离开该区域时完成动画。否则动画不会停止。

尝试在每个动画初始化之前放置 stop():

$(".help_text").stop().animate({right: "1.5em"},'slow'); $(".slide_help")stop().animate({right: "9em"}, 'slow');

Javascript-JQuery：从左到右滑动菜单？

Javascript-JQuery: sliding menu going left-to-right?

html

javascript

css

jquery

slide