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

删除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 2

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

$('.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 3

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

尝试在每个动画初始化之前放置stop（）：

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

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

3 个答案: