Strange setInterval behavior
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 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!
-
$(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!