Question

我在插槽机类型的动画中为徽标中的图像制作动画。我需要它一旦到达图像的顶部就停止动画（如果可能的话发送回调）。

目前，这就是我完成动画的方式：

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

关于如何让它停止并发送回调的任何想法？

Answer 1

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

Answer 2

所以我假设你有一个包含多个徽标的精灵图像，你希望它们每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 3

我不建议在处理动画时使用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来触发动画的另一个原因是由于在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/

在特定高度停止增量

3 个答案: