用Jquery打開和關閉動畫事件

我需要幫助。我可以通過點擊一個按鈕來打開一個事件，但無法弄清楚如何通過再次點擊該按鈕來關閉它。此外，我似乎無法獲得動畫速度和緩解工作。有什麼建議麼？（我正在學習jQuery的）用Jquery打開和關閉動畫事件

#services { 
    background: none repeat scroll 0 0 #FFFFFF; 
    margin: 0; 
    padding: 20px; 
    position: absolute; 
    right: -22%; 
    top: 0; 
    width: 22%; 
    min-height: 100%; 
    box-shadow: -2px 0 5px #000000; 
    -moz-box-shadow: -2px 0 5px #000000; 
    -webkit-box-shadow: -2px 0 5px #000000; 
    overflow: auto; 
} 

<script> 
    $(".btn-services").on('click', function(){ 
     $("#services").animate({right:'0%'}, 1000, 'linear'); 
    }); 
</script>

來源

2013-10-14 Amanda C.

您可以使用jQuery .stop（）（http://api.jquery.com/stop/）停止動畫。您可以結合起來，與檢查，以查看是否正在動畫它（代碼未測試）：

$(".btn-services").on('click', function(){ 
    if($("#services").is(':animated')) { 
    $("#services").stop(); 
    } else { 
    $("#services").animate({right:'0%'}, 1000, 'linear'); 
    } 
});

不是一個if/else語句您可以使用切換。

關於圍繞動畫速度的問題，並緩解：

目前在您的動畫功能，你必須設定爲1000毫秒的速度，所以這部動畫將完成（右-22％，在移動到右0％ 1秒）。例如，您可以將其減慢到3000，動畫將需要3秒。
Jquery中默認有兩種緩動函數：'swing'和'linear'。目前，您正在使用「線性」，因此動畫以恆定速率進行。對於額外的緩動功能，您需要包含額外的插件

來源

2013-10-14 13:03:50

用Jquery打開和關閉動畫事件

回答

相關問題