Включение и выключение события анимации с помощью JQuery

Question

Мне нужна помощь. Я могу включить событие одним нажатием кнопки, но не могу понять, как отключить его одним кликом этой же кнопки. Кроме того, я не могу показаться, что скорость анимации и облегчение работы. Какие-либо предложения? (Я учусь 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> 

Answer 1

Вы можете использовать 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'); 
    } 
}); 

, а не если/иначе вы можете быть в состоянии использовать тумблер.

Что касается вашего вопроса вокруг скорости анимации и ослабления:

• В настоящее время в функции одушевленного у вас есть скорость набора до 1000 мс, так что анимация будет завершена (движение от правого -22% до 0% право в 1 секунда). Вы можете замедлить это, например, до 3000, а анимация займет 3 секунды.
• В JQuery доступны две функции ослабления: «swing» и «linear». В настоящее время вы используете «linear», поэтому анимация прогрессирует с постоянной скоростью. Для дополнительных функций ослабления вам необходимо будет добавить дополнительные плагины