Остановка приращения на определенной высоте

Question

Я анимирую изображения внутри логотипа в виде анимации на игровых автоматах. Мне нужно, чтобы он прекратил анимацию, как только он достигнет верхней части изображения (и отправил обратный вызов, если это возможно).

В настоящее время я выполняю анимацию следующим образом:

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

Любые идеи о том, как я мог бы заставить его остановиться и отправить обратный вызов?

Answer 1

Итак, я предполагаю, что у вас есть спрайт-изображение, содержащее несколько логотипов, вы хотите, чтобы они скользили каждые 5 секунд до достижения последнего, а затем вызывали обратный вызов?

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

Answer 2

Я бы не советовал использовать setInterval при работе с анимацией из-за того, как новые браузеры вносят изменения в методы setInterval и setTimeout, когда вкладка не является активной вкладкой.

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);

Редактировать:Другая причина не использовать setInterval для запуска анимации связана с reqeustAnimationFrame, который был реализован в 1.6 и удален в 1.6.3, который, скорее всего, будет добавлен обратно в 1.7.Если вы сейчас напишете код, который будет совместим позже, это будет меньше затрат на техобслуживание, которое вам придется выполнять позже, если вам потребуется обновление.

Вот jsfiddle http://jsfiddle.net/czUnU/

Редактировать: функция...

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/

Answer 3

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