"queing" non-animating properties: attr

Question

UPDATE: alright so I see that I can just include each attr replacement within the function of the timer. That means I do that five times; once for each graphic. But, is there a cleaner way to do this? Thanks

ok, so I have five different images I want to replace the src for. However, I want each one sequential.. replace the first, then the second etc.

Since I'm changing the attribute source, the animation que won't help.

I tried the simple timer plugin and put that in a function, then called the function after each attr replace but all attr's happen before the function calls.

Then, I put the timer function, the attr replacements with the calls to the timer function all inside a function, loaded the document and called that but still, attr happens all-at-once and then function calls.

So, here is the last thing I tried explained just above:

$(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>

I know I'm missing something as it has to be easily accomplished but I don't have it yet. Any pointers? PS... I'm using simple plug-in for the timer.

Also, I should note that I'm just looking for a pause after each attr replace so where the alert('yes'); is, I thought I'd just return false or null; or whatever.

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

btw the self-executing wrapper function is here to create a local scope so that you don't polute the global namespace...

Answer 2

You could use a simple Interval, like this:

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

This takes advantage of your image URLs having a convention, so we're just stepping through the array every 2 seconds, then the end is reached the interval just doesn't fire again.