homepage Welcome to WebmasterWorld Guest from 54.237.99.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Strange setInterval behavior (jquery)
jquery setInterval javascript
el_roboto

5+ Year Member



 
Msg#: 3882225 posted 8:08 am on Mar 31, 2009 (gmt 0)

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

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



 
Msg#: 3882225 posted 9:37 pm on Apr 1, 2009 (gmt 0)

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

5+ Year Member



 
Msg#: 3882225 posted 12:07 pm on Apr 6, 2009 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3882225 posted 11:49 pm on Apr 6, 2009 (gmt 0)

The assignment

var i = 0;

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

el_roboto

5+ Year Member



 
Msg#: 3882225 posted 8:44 am on Apr 8, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved