Long shot but can anyone tell me how to accomplish this?

[PicnicTutorials]

I have a style sheet switcher here on my site http://goo.gl/zA3Pm - the on/off link in the top right corner. Currently im turning off the jquery made animation by using !important in the css alt style sheet and and simply locking its position. I thought that was pretty good way to do it. Still do. But even though the animation is frozen the JS is still working so its a little hard on the CPU for those that want to turn it off. Is there anyway that you can think of to turn it off and on by turning the jquery animation off and on? That way the CPU usage would be restored for those that need it. Like me on my old XP. I'm thinking no but thought I'd ask.

[Pullo]

Hi Eric,

Maybe you could use .stop(), which stops the currently-running animation on the matched elements.
To stop everything you could then do:

$("body").find('*').stop(true, true);

[PicnicTutorials]

Yah the code you gave me last time (probably the same here) worked to turn it off. But then how do I turn it back on again? Thanks Pullo

[chris.upjohn]

Below is a plugin I have used before which is extremely handy when you need to pause/play animations, it respects the current time in the animation so when it resumes the queue id is still the same there for it won't start again or stop completely.

http://tobia.github.com/Pause/

[Pullo]

Currently you have:

$("document").ready(function(){
  Do your animation here
});

you could move the code to kick off the animation into its own function:

$("document").ready(function(){
  function startAnimation(){
    Do your animation here
  }
 
  startAnimation();
});

then you could add a function to stop the animation:

$("document").ready(function(){
  function startAnimation(){
    Do your animation here
  }
 
  function stopAnimation(){
    $("body").find('*').stop(true, true);
  }
 
  startAnimation();
});

After that you can toggle between starting and stopping the animation quite easily:

$(document).ready(function() {
  function startAnimation(){
    Do your animation here
  }
 
  function stopAnimation(){
    $("body").find('*').stop(true, true);
  }
 
  $('#onButton').on("click", function() {
  if(toggleState) {
    startAnimation();
  } else {
    stopAnimation()
  }
  toggleState = !toggleState;
  });
 
  var toggleState = true;
  startAnimation();  
});

However, as Chris points out with his answer, this will reset the animation to the beginning.
It would probably look nicer to have some kind of pause/resume functionality, in which case you want to look at .queue(), or better still, the plugin he suggests.

[PicnicTutorials]

Hey thanks guys! I just realized a important factor. Do either of those methods have cookie? So the user doesnt have to turn off the animation each time they change pages or return to the site? Thats what I do love about the style sheet switcher.

Also unfortunately that plugin http://tobia.github.com/Pause/ doesnt seem to work in chrome.

[Pullo]

Hi Eric,

I think the starting and stopping of the animation is fairly cookie agnostic.
That is to say, that you can set/unset your cookie when the user clicks on the 'animation on/off' button.
You need only check for the cookie on page load.

[PicnicTutorials]

Hi Eric,

I think the starting and stopping of the animation is fairly cookie agnostic.
That is to say, that you can set/unset your cookie when the user clicks on the 'animation on/off' button.
You need only check for the cookie on page load.

Since that plugin above doesn't work in chrome ill go with what you posted Pullo. Any way you could show me how to add a cookie thingy-ma-dooger to it?

[chris.upjohn]

The plugin I posted works fine in any browser, it may however break in newer versions of jQuery

[PicnicTutorials]

Doesn't work in my chrome

[chris.upjohn]

Which version of Chrome are you using?

[Pullo]

Could show me how to add a cookie thingy-ma-dooger to it?

Just to be clear, do you mean that you want your site to remember if the user has turned the animation on or off, so that the next time they visit the site, things are how they left them?

[PicnicTutorials]

Just to be clear, do you mean that you want your site to remember if the user has turned the animation on or off, so that the next time they visit the site, things are how they left them?

Exactly

[PicnicTutorials]

Which version of Chrome are you using?

The latest - v23 something

[Pullo]

Hey man,
Here's a demo of the stop/start thing with cookies.
To see what I've done, just have a look at the source.
Any questions, just let me know.

BTW, regarding the plugin: could it be a problem with testing locally (Chrome can be a bit picky sometimes)? Did you try running it on a server?

[PicnicTutorials]

Awesome - your the man Pullo! Just a couple issues. When you turn it off the images move off screen. That can be fixed prob by moving the position into the css. And in FX (at least) after I turn it off it turns back on after about 1 minute all by it self.

[Pullo]

When you turn it off the images move off screen. That can be fixed prob by moving the position into the css.

Yeah, they just shoot back to their starting positions.

And in FX (at least) after I turn it off it turns back on after about 1 minute all by it self.

Not sure about this.
You will need to make the cookie valid across your whole domain if you want to use it on more than one page.
Try this:

$('#onoff').on("click", function() {
  if(toggleState) {
    $.cookie('animationStatus', 'on', { expires: 7, path: '/'  });
    $("#onoff span").text("ON")
    startAnimation();
  } else {
   $.cookie('animationStatus', 'off', { expires: 7, path: '/'  });
   $("#onoff span").text("OFF")
    stopAnimation();
  }
});

[PicnicTutorials]

Ok il give that a try. Just put that anywhere in the js? However, I never even left the page. And it kept turning on after a minute.

[Pullo]

OK, I see what you mean.
that's nothing to do with the cookies, that's the call to setTimeout kicking back in.
We need to cancel those.

Hang on ...

[Pullo]

Hi,

I fixed it.
The demo has been updated. Now it won't start again on its own.

You should still set the domain on your cookies though, like I describe above.
I fixed this in the demo, too.

It's (too) late here.
Good night!

[PicnicTutorials]

Hi,

I fixed it.
The demo has been updated. Now it won't start again on its own
You should still set the domain on your cookies though, like I describe above.
I fixed this in the demo, too.

Good night!

Awesome. Thank you so much. I'll play with it in the morning...

[PicnicTutorials]

Good morning,

Anyway to make it on by default. And I hate to say, but animation turns on again after about a minute after being turned off. Just open another tab and then come back to it after a bit and you'll see.

[Pullo]

Good evening,

I just had a look at the page (in Chrome and Firefox), but for me, when I turn the animation off (it was on both times by default), it stays off.
I checked after five, ten and fifteen minutes.

Did you maybe fix this issue in the meantime?

[PicnicTutorials]

No I didn't. Was it the same link? Ill try clearing the cache. I never really consider that because I clear my cache obsessively every 5 minutes

[Pullo]

I used the link in your signature.
Should I have been looking at my demo page?