Strange setInterval behavior (jquery)

jquery setInterval javascript

[el_roboto]

Working on a nice load transition for a portfolio section of a website.

9 images are displayed inline in a list, due to the wrapper these display as 3 rows of 3 images all blocked together.

The idea is that using jquery these li's load in one by one using setInterval, with a fade in/fade slightly back out effect and then fade in on hover/fade slightly back out on mouseout.

At the moment the elements load in as desired when the page first loads - but there is some pagination going on here too to view the next/previous 9 images. This is done with an $.ajax() call so the entire page doesn't reload - and it's when browsing the content this way that the setInterval is increasingly ignored. The first time you click next page the list loads 2 items at a time, then 3, then 4 at a time and so on.

I'd like to retain the 1 by 1 loading so I'm hoping someone can help identify the problem with my script - which as I'm a beginner may not be particularly elegantly written I'm afraid!

Javascript:
$(function () {
$('#Portfolio').hide();
$('#Portfolio').slideDown("fast");
});
function StartOneByOne() {
$('#Portfolio li').hide();
var int = setInterval("OneByOne()",200);
$('#Portfolio li').hover(function(){$(this).fadeTo(200, 1.0);},function(){ $(this).fadeTo(500, 0.6);});
}
function OneByOne() {
var le = $('#Portfolio li').length;
var i = 0;
if (i >= le) {clearInterval(int);}
$('#Portfolio li:hidden').eq(i).fadeIn(400).fadeTo(200,0.6)
i++;
}

The call to StartOneByOne() is made in the html straight after the ul closes. A div containing my <ul id="Portfolio"> and <script> reloads the new content when browsing next/previous

Hope this makes sense and someone can help!

[whoisgregg]

I'm not too familiar with jQuery, so I'm afraid I can't be too much help here. However, I believe that when you declare the

var int

in the StartOneByOne() function, that variable is being defined locally and isn't actually available to be cleared by the clearInterval() function in the OneByOne() function.

It may help to define the

var int

at the beginning of your script, then don't prepend "var" when you set the int variable inside your functions.

Hopefully someone who's used jQuery can chime in as well and provide some help. :)

[el_roboto]

Good point, I've given this a go but still seeing the same behavior.

Thanks for the suggestion - if anyone else has any ideas would love to hear them.

[daveVk]

The assignment

var i = 0;

seems misplaced, the test on following line will always be false.

[el_roboto]

Thanks dave - This seems logical yet when declared elsewhere the script fails to run.

I've actually been playing around with it thismorning and have it working now with the following

$(function () {
$('#Portfolio').hide();
$('#Portfolio').slideDown("fast");
var int = setInterval("OneByOne()",100);
});
function StartOneByOne() {
$('#Portfolio li').hide();
$('#Portfolio li').hover(function(){$(this).fadeTo(200, 1.0);},function(){$(this).fadeTo(500, 0.6);});
int;
}
function OneByOne() {
var i = 0;
var le = $('#Portfolio li').length;
if (i >= le) {clearInterval(int); var i = 0;}
$('#Portfolio li:hidden').eq(i).fadeIn(400).fadeTo(200,0.6)
i++;
}

Thanks for the responses