How do I make a checkbox in jQuery lock a existing sliding window from moving and then unlock it by unchecking the box?

Question

I`m very new to jQuery but am starting to get the hang of it.

My Question is: How do I make a checkbox in jQuery lock a existing sliding window function from moving and then unlock it by unchecking the box? So basically enable/disable a existing function in my project called - #navigate

Any help would be greatly appreciated!

Answer 1

Lets say you have the following checkbox:

<input type='checkbox' id='stopNavAnim' />

You can determine if it is checked like so:

$('#stopNavAnim').is(':checked');

As far as controlling your particular animation goes, it really depends on how you are animating your #navigate. You might be able to simply add

if ($('#stopNavAnim').is(':checked')) return;

to the places where the animation would be triggered. If you are having problems with it, please post the code you are using to animate with.

A horrible jsbin example is available.

The other option would be to bind to the "change" event on the checkbox and call some other function to stop/start your animations:

$('#stopNavAnim').bind('change', function() {
  if ($(this).is(':checked')) stopAnim();
  else startAnim();
});