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

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