Turning an animation event on and off with Jquery

Question

I need help. I am able to turn an event on with the click of a button, but can't figure out how to turn it off with another click of that same button. Also, I can't seem to get the animation speed and easing to work. Any suggestions? (I'm learning 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>

Joel Kent · Answer 1 · 2013-10-14T13:18:27.880

You can use Jquery .stop() ( http://api.jquery.com/stop/ )to stop an animation. You can combine that with a check to see if it is currently being animated (code not tested):

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

Rather than an if/else you may be able to use toggle.

Regarding your question around animation speed and easing:

Currently in your animate function you have the speed set to 1000 ms, so this animation will complete (move from right -22% to right 0% in 1 second). You could slow this down for example to 3000 and the animation would take 3 seconds.
There are two easing functions available by default in Jquery: 'swing' and 'linear'. Currently you are using 'linear' so the animation progresses at a constant rate. For additional easing functions you will need to include additional plugins

Turning an animation event on and off with Jquery

1 Answers1