Javascript-jQuery：從左到右的滑動菜單？

我有一段文字放在瀏覽器之外，我希望它在光標懸停在另一段文本上時顯示。這裏是我的代碼：Javascript-jQuery：從左到右的滑動菜單？

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很新...謝謝！

來源

2015-05-26 Antoni4040

你有問題的工作示例，我們可以看到什麼？ – Taplar

看看[stop]（https://api.jquery.com/stop/）功能。 '$（ '選擇'）。停止（）。動畫（）'。這可能會幫助你 – empiric

增加了一些代碼，我認爲這應該足夠了... – Antoni4040

降的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的活動，有時不正常工作

來源

2015-05-26 12:10:35

謝謝你，這工作得很好！ – Antoni4040

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

來源

2015-05-26 12:10:21

這也適用，謝謝！ – Antoni4040

的問題是，你需要完成的動畫，當鼠標離開該地區。否則，動畫不會停止。

嘗試把停止（）初始化之前，每個動畫：

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

來源

2015-05-26 12:23:39

Javascript-jQuery：從左到右的滑動菜單？

回答

相關問題