Stopping increment at specific height

Question

I am animating images within a logo in a slot-machine type of animation. I need it to stop animating once it gets to the top of the image (and send a callback if possible).

Currently, this is how I'm accomplishing the animation:

window.setInterval(function() {
    $('#title-1 img').animate({bottom : '-=60px'})
}, 5000);

Any ideas on how I would get it to stop, and to send the callback?

score 0 · Answer 1 · answered Sep 27 '11 at 18:11

0

var interval = window.setInterval(function() {
    $('#title-1 img').animate({bottom : '-=60px'},
          function(){
                if(`some stop point`) clearInterval(interval);
          }
    );
}, 5000);

answered Sep 27 '11 at 18:11

Naftali

144,921
39
244
303

score 0 · Accepted Answer · answered Sep 27 '11 at 18:14

So I assume you have a sprite image containing multiple logos, you want them to slide each 5 seconds until you reach the last one, and then call the callback?

var cnt = 6,
    $img = $('#title-1 img'),
    i = 0;
function animate_logo(cb) {
    if (i < cnt) {
        $('#title-1 img').animate({bottom : '-=60px'});
        i += 1;
        setTimeout(function () {animate_logo(cb)}, 5000);
    }
    else {
        cb();
    }
}();

Kevin B · Answer 3 · 2011-09-27T20:04:26.213

0

I would not suggest using a setInterval when dealing with animations due to the way newer browsers are making changes to the way setInterval and setTimeout work when the tab is not the active tab.

var $title1 = $("#title-1");
var $title1img = $title1.find('img');
function anim(){
  if ($title1.height() < parseInt($title1img.css("bottom"))) {
    setTimeout(function(){
      $title1img.animate({bottom : '-=60px'},anim);
    },5000);
  }
}
$title1img.animate({bottom : '-=60px'},anim);

Edit: another reason not to use setInterval to fire off animations is due to the reqeustAnimationFrame that was implemented in 1.6 and removed in 1.6.3, which will more than likely be added back in 1.7. If you write code now that will be compatible later, that's less maintenance you will have to do later if you end up being required to upgrade.

Here's a jsfiddle http://jsfiddle.net/czUnU/

Edit: function...

function animColumn(title,img){
  function anim(){
    if (title.height() < parseInt(img.css("bottom")) {
      setTimeout(function(){
        img.animate({bottom : '-=60px'},anim);
      },5000);
    }
  }
  img.animate({bottom : '-=60px'},anim);
}
animColumn($("#title-1"),$("#title-1 img"));
animColumn($("#title-2"),$("#title-2 img"));
animColumn($("#title-3"),$("#title-3 img"));

http://jsfiddle.net/czUnU/1/

edited Sep 27 '11 at 20:04

answered Sep 27 '11 at 18:16

Kevin B

94,570
16
163
180

Though this seems like this may be the best option, it is not stopping the animation at the end. As well, how would I have it trigger another similar animation? – Alexander Sep 27 '11 at 18:32
i don't think height is what we should be looking at here. changing the bottom position will not change the height of the div. what we need to be looking at is the bottom position relative to the height. Updating sample, the if statement part is changing. – Kevin B Sep 27 '11 at 18:40
what do you mean about a similar animation? do the same thing on a different column? or apply another animation to the mix – Kevin B Sep 27 '11 at 18:42
The same thing on a different column. – Alexander Sep 27 '11 at 19:47
you could turn the whole thing into a function where you pass in two items. – Kevin B Sep 27 '11 at 19:48
It only does the first animation (because of the initiating animate function at the bottom), aside from this it still is not working. Confused. – Alexander Sep 27 '11 at 19:59
Sorry, there was a typo in the 2nd example. updated. The second example is meant to be ran by itself, not in addition to the first – Kevin B Sep 27 '11 at 20:05
This is still not working and I'm lost as to why. Very frustrating. – Alexander Sep 27 '11 at 20:23
Nothing. The first animation happens, and then nothing. I put an alert in the if statement to see if it was registering as less than the img bottom but got nothing. Not sure what to try next. – Alexander Sep 27 '11 at 20:51
That sounds like a css issue. does the title div have a set height, such as what i did in the jsfiddle? – Kevin B Sep 27 '11 at 20:53
Yes it does have a set height. – Alexander Sep 27 '11 at 20:58

Stopping increment at specific height

3 Answers3