SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jQuery animation issue

    Hi there,

    I've written a script to make a series of images into a kind of slideshow. It's live here:

    www.mikes-lab.com/luxe/

    It works fine, except if you open another tab and surf the web for 15-20 mins, then click back on to the page, the animation has broken, and the slideshow behaves very strangely. Could it be something to do with setTimeout? Is there a jQuery method that I should be using?

    Many thanks,
    Mike

  2. #2
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a bit hard to test since it looks like you're referencing all four JS files from localhost, so the slideshow won't run. You probably have them in the right place on your computer so it works for you.

    Sounds like something wrong that's hogging up memory as the slideshow runs, but without actually seeing the thing run it's hard to tell.

  3. #3
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for taking the time to have a look. I've sorted out the references for the jQuery scripts now, so it's running ok.

    Many thanks,
    Mike

  4. #4
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    By that, I mean the script is now running, so you can see the issue. Not that its running ok, if anything its worse than when viewed locally.

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2012
    Location
    Sacramento, CA, USA
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I was able to see it working and also reproduce the issue to some extent on Chrome. The animation get choppy and the images flicker. I couldn't see anything obvious that would cause it, though. It's not throwing JS errors even after running for a long time. When I get a chance I'll try debugging it further, but a quick workaround might be to cycle the slides a few times and then stop. If they mouseover and mouseout again, it could start over. A hack, I know....

  6. #6
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for taking another look raw10. I'd appreciate anymore feedback, since I seem to get this kinda behaviour a lot when doing this kind of animation with jQuery. Most of the time it'll go under the client's radar, but still, it bugs the hell out of me, and I'd love to know what's causing it.

    Best,
    Mike

  7. #7
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,312
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    The issue is likely because Chrome slows or suspends JS execution for inactive tabs. You may have to listen to the window blur and focus events, and stop and start the slideshow accordingly.

  8. #8
    SitePoint Addict
    Join Date
    Oct 2009
    Location
    London, UK
    Posts
    382
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Jeff,

    Thanks for your reply. I tried using a listener for the window blur and focus events, but if anything the issue became more pronounced. However, I did manage to fix the problem.

    Here's what I had:
    Code:
    function slide(i){
    	if(!i){
    		var i = ($('.slide .selected').index()) + 1;
    		length = $('.slide').children().length;
    		if(i >= length) i=0;
    	}
    	
    	$('.slide').children().eq(i).animate({left:0}, 1200, function(){
    		width = $('.slide .selected').width();
    		$('.slide .selected').css({zIndex:100, left: width}).removeClass('selected');
    		$(this).css({zIndex:0}).addClass('selected');
    		$('.slide-nav-btn').removeClass('selected').eq(i).addClass('selected');
    	});
    	timer = setTimeout("slide()", delay); //This line causing the issue
    	
    }
    so, there were a lot of animations being called, regardless whether the previous animation had completed.

    If I move the setTimeout call to the anonymous function, the animations don't mount up when the page is blurred. Simples!

    Code:
    function slide(i){
    	if(!i){
    		var i = ($('.slide .selected').index()) + 1;
    		length = $('.slide').children().length;
    		if(i >= length) i=0;
    	}
    	
    	$('.slide').children().eq(i).animate({left:0}, 1200, function(){
    		width = $('.slide .selected').width();
    		$('.slide .selected').css({zIndex:100, left: width}).removeClass('selected');
    		$(this).css({zIndex:0}).addClass('selected');
    		$('.slide-nav-btn').removeClass('selected').eq(i).addClass('selected');
    		timer = setTimeout("slide()", delay); //Moved to within the function
    	});
    	
    }


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •