在特定高度停止增量

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

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

Answer 3

我不會建議在適當的時候標籤是不活動標籤新的瀏覽器正在改變方式的setInterval和setTimeout的工作方式動畫打交道時使用的setInterval。

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來斷火的動畫是由於在1.6實施和1.6.3刪除reqeustAnimationFrame，這將很可能在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/