Welcome to WebmasterWorld Guest from 54.221.119.45

Forum Moderators: open

Message Too Old, No Replies

Strange setInterval behavior (jquery)

jquery setInterval javascript

     

el_roboto

8:08 am on Mar 31, 2009 (gmt 0)

5+ Year Member



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

9:37 pm on Apr 1, 2009 (gmt 0)

WebmasterWorld Senior Member whoisgregg is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

12:07 pm on Apr 6, 2009 (gmt 0)

5+ Year Member



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

11:49 pm on Apr 6, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



The assignment

var i = 0;

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

el_roboto

8:44 am on Apr 8, 2009 (gmt 0)

5+ Year Member



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

 

Featured Threads

Hot Threads This Week

Hot Threads This Month