Javascript-JQuery:从左到右滑动菜单

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

本文关键字：菜单 从左到右 Javascript-JQuery      更新时间：2023-09-26

我有一段文本放在浏览器外部，我希望它在光标悬停在另一段文本上时显示。下面是我的代码:

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的新手…谢谢!

放下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事件了，它有时不能正常工作

在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

问题是，您需要在鼠标离开该区域时完成动画。如果没有，动画将不会停止。

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

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

相关文章：