-1

Hi I have 4 windows 8 style live tiles on my web page each of them are infinitely looping to animate sliding up and down. I can get this to work well using a method that calls itself. However I want to pause this animation once the user clicks on one of the tiles. Once a tile is clicked it expands to the full size of the page but the animation continues when I want it to stop. I have tried implementing the stop() function to no avail. I have tried stop(true, true); to no avail. I have tried putting in a "sleep" method that puts the animation delay rate very high(to a stop) and thus putting the animation "to sleep" but it is unreliable getting it to stop on the right slide for some reason. If the stop method does work it only briefly works and the tiles all become out of sync and break I have also tried a boolean check i.e. if clicked stop but still no luck. Does anyone have any suggestions? thanks.

Here is some sample code:

function tiles()
{
setTimeout(function(){alltiles(news1,news2);},4000);

this method gets called on startup and the tile starts animating via alltiles(); after 4 seconds. This is where the animation gets done I have included a callback function so each animation starts when the last one has completed. Then the alltiles(); method gets called again to infinitely loop the animation.

function alltiles(div1, div2){           
$(div1).delay(delayRate).animate({top: "-100%"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div1).delay(delayRate).animate({top: "0"}, speed, easing,
function(){});
$(div2).delay(delayRate).animate({top: "100%"},speed,easing,function(){
    alltiles(div1, div2);});

Finally just a sample of where I am implementing the mouse down. I have tried unique ids also with no luck.

$('.tile,.tile2, .tile3, .tile4').mousedown(function(event) {
  $('.tile,.tile2, .tile3, .tile4').stop();
  $(this).addClass('selected');
 $(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
  $(this).delay(2000).animate({ width: "98%",height: "98%" }, 1000 );
user2002077
  • 595
  • 1
  • 6
  • 17
  • Are you using setInterval/clearInterval? See these posts: [one](http://stackoverflow.com/questions/10442452/setinterval-and-clearinterval-when-cleared-does-not-animate-automatically) [two](http://stackoverflow.com/questions/4986667/jquery-how-to-restart-setinterval-after-killing-it-off-with-clearinterval) – cssyphus Jan 15 '14 at 23:01
  • I yes I have tried .stop(true) and .stop(true,true) on the div ids but it only slightly works. It would stop it in the middle of the animation but it would only last a second at most before continuing. No not using setInterval. Using setTimeout so I can start my tiles at different times then they loop into continuous animation. – user2002077 Jan 15 '14 at 23:18

3 Answers3

1

If you're starting the whole thing with this:

alltiles(news1,news2);

which then proceeds to do animation operations on news1 and news2, then, you need to stop it with this:

$(news1).stop(true);
$(news2).stop(true);

Passing the true argument with .stop(true) clears the animation queue for that particular object so any queued up operations are stopped too.

To put it in your click handler:

$('.tile, .tile2, .tile3, .tile4').mousedown(function(event) {
    $(news1).stop(true);
    $(news2).stop(true);
    $(this).addClass('selected');
    $(".tile, .tile2, .tile3, .tile4").not(this).fadeOut(100);
    $(this).delay(2000).animate({width: "98%", height: "98%"}, 1000 );
});
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • tried it again there. I think might be making progress thanks very much. I was originally trying it like this $(news1,news2).stop(true); but your info has made progress. I tried it your way $(news1).stop(true); $(news2).stop(true); and now it stops as planned right on the tile that was clicked however after a few seconds the animation starts playing again. – user2002077 Jan 15 '14 at 23:27
  • Hi again I think I have got it covered thanks everyone for your input. It works but it may not be the best practice. I have created a die function which stops the animation from playing and to prevent it carrying on I change the delayRate to something high so its practially stopped. A wake(); will restore the delayRate once the user mouse leaves. function die(){ $(review1).stop( true,true ); $(review2).stop(true,true); delayRate=100000; } – user2002077 Jan 15 '14 at 23:33
  • @user2002077 - You must have a timer somewhere that is starting the animation again and again and you need to prevent that timer from firing again after you've stopped it. – jfriend00 Jan 16 '14 at 00:45
  • Hi yes I got it sorted I used a setTimeout function to loop the animation continuously rather than having it call itself all the time. I then created a die method that basically cleared the Timeout. I had to push each Timeout onto an array and clear that array of Timeouts. Thanks for your help. – user2002077 Jan 17 '14 at 17:35
0

Say if you have a button with id="theStopButton". If a user clicks on it, it will stop ALL animations on the page with $.fx.off = true.

$('#theStopButton').click(function() {
    $.fx.off = true;
});

http://api.jquery.com/jquery.fx.off/

CRABOLO
  • 8,605
  • 39
  • 41
  • 68
  • Thanks I tried it there but now its gone even more mad flashing and flickering quickly. – user2002077 Jan 15 '14 at 22:57
  • yea that's what I'm thinking but that's why I put a callback function in each of the animations. My thinking was that surely on user click I should be able to stop it between each one of the animations. – user2002077 Jan 15 '14 at 23:07
  • yea I might give it a go using setInterval or something – user2002077 Jan 15 '14 at 23:13
0

Try adding the necessary boolean values

http://api.jquery.com/stop/

.stop( true, true )

OR

.stop(true)
BKCOHEN
  • 114
  • 2
  • 14