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

JavaScript
1

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.

2

Hi Eric,

Maybe you could use [.stop()](http://api.jquery.com/stop/), which stops the currently-running animation on the matched elements.
To stop everything you could then do:

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

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

4

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/

5

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()](http://api.jquery.com/jQuery.queue/), or better still, the plugin he suggests.

6

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.

7

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.

8

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?

9

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

10

Doesn’t work in my chrome

11

Which version of Chrome are you using?

12

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?

13

Exactly :slight_smile:

14

The latest - v23 something

15

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?

16

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.

17

Yeah, they just shoot back to their starting positions.

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();
  }
});
18

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.

19

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 …

20

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!