"queing" non-animating properties: attr
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 wit开发者_如何转开发h 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.
(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...
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.
精彩评论