[jQuery] Stop on mouseover, restart on mouseout
I'm coming in on the tail end of the development of a site, and I'm
having to replace another developer. I'm experiencing an issue with a
snippet of code that causes a div to periodically move in order to
show other content (similar to the main flash panel of hulu.com).
There is one div named "media-scroll-container" that has an overflow:
hidden property and holds another div named "media-scroll". Within
"media-scroll", there are four panels: news, photos, videos, and
facebook, and each of these holds their own information. Above the
"media-scroll-container" div is a div named "media-nav", which holds a
list that serves as the navigation to these panels (the user clicks
video, and the video panel animates into view, etc). All of this
functionality works.
I've set up a function that loops through these panels at a set pace,
and it works with no issues. The problem I'm having is getting the
panels to stop when there is activity within them (like when a user
clicks play on a video), and then get moving again when the activity
stops. I figured that one of the ways to do this is with
the .mouseover and .mouseout event handlers. I'm having trouble
getting this aspect to work, however, so I thought I'd throw the
problem out there to see if anyone has any ideas for a solution.
This is the loop code I'm currently using:
function loop(){
$('#media-scroll').animate({left:'0'},{queue:false, duration:600 });
$('#media-status').animate({left:'30px'},{queue:false, duration:
600 });
$('#media-nav a').removeClass('active');
$('#news-link').addClass('active');
setTimeout(function(){
$('#media-scroll').animate({left:'-425px'},{queue:false, duration:
600 });
$('#media-status').animate({left:'105px'},{queue:false, duration:
600 });
$('#media-nav a').removeClass('active');
$('#photos-link').addClass('active');
}, 9000);
setTimeout(function(){
$('#media-scroll').animate({left:'-850px'},{queue:false, duration:
600 });
$('#media-status').animate({left:'170px'},{queue:false, duration:
600 });
$('#media-nav a').removeClass('active');
$('#videos-link').addClass('active');
}, 18000);
setTimeout(function(){
$('#media-scroll').animate({left:'-1300px'},{queue:false, duration:
600 });
$('#media-status').animate({left:'250px'},{queue:false, duration:
600 });
$('#media-nav a').removeClass('active');
$('#facebook-link').addClass('active');
}, 27000);
}
setTimeout(loop,30000);
setInterval(loop, 36000);
The code isn't as graceful as I'd like, since I'm having to build on
top of what a previous developer has done.
I'd appreciate any help on this. Thanks in advance.