Question

更新：好的，所以我看到我可以在计时器的功能中包含每个attr替换。这意味着我这样做了五次;每个图形一次。但是，有更清洁的方法吗？感谢

好的，所以我想要替换src的五个不同的图像。但是，我希望每一个顺序..替换第一个，然后第二个等。

由于我正在更改属性源，因此动画队列无效。

我尝试了简单的计时器插件并将其放入一个函数中，然后在每个attr替换后调用该函数，但所有attr都在函数调用之前发生。

然后，我将定时器函数，attr替换与函数内部的定时器函数的调用全部放在一个函数中，加载文档并调用它但仍然，attr一次性发生然后函数调用。

所以，这是我上面尝试过的最后一件事：

$(document).ready(function() {
 function holdIt(){
  myTimer = $.timer(2000,function(){
   alert("yes");
  });
 };
function doMe() {
$('#visit').attr('src', 'images/visitGrow.jpg');
holdIt();
$('#real').attr('src', 'images/realGrow.jpg');
holdIt();
$('#life').attr('src', 'images/lifeGrow.jpg');
holdIt();
$('#retirement').attr('src', 'images/retirementGrow.jpg');
holdIt();
$('#center').attr('src', 'images/centerGrow.jpg');
};

doMe();
 });
 </script>

我知道我错过了一些东西，因为它必须很容易完成，但我还没有。有什么指针吗？ PS ...我正在使用简单的插件进行计时器。

另外，我应该注意到，我只是在每个attr替换后寻找一个停顿，所以警报（'是'）;是的，我以为我只会返回false或null;或者其他什么。

Answer 1

(function () {
    var items = $("#visit, #real, #life, #retirement, #center");
    var len = items.size();
    var urls = ["images/visitGrow.jpg", "images/realGrow.jpg", .........];
    var i = 0;

    function step() {
        items.eq(i).attr("src", urls[i]);
        i += 1;
        if (i >= len) {
            return;
        }
        setTimeout(step, 2000);
    }

    step();
})();

顺便说一下，自执行包装器函数是为了创建一个本地范围，这样就不会对全局命名空间进行调查......

Answer 2

您可以使用简单的Interval，如下所示：

$(function() {
  var imgs = ["visit", "real", "life", "retirement", "center"], i=0,
  timer =  setInterval(function() {
    $("#" + imgs[i]).attr("src", "images/"+imgs[i]+"Grow.jpg");
    if(i++ == imgs.length) clearInterval(timer);
  }, 2000);
});

这利用了你的图像URL有一个约定，所以我们只是每2秒逐步遍历数组，然后到达结束时间间隔不会再次触发。

“排队”不动画属性：attr

2 个答案: