I'm replacing another developer on the tail-end of a development
project, and I've run into a snag. The page I'm working on has a div
named "media-scrollcontainer" which has a property of overflow: hidden
and holds another div named "media-scroll". Within "media-scroll" are
four divs which hold different content: news, photos, videos, and
facebook. Above this container is a div named "media-nav", which
contains a list-based nav menu for each of these panels (you click on
one and it animates the relevant panel into view).
The client would like for these panels to move on their own and then
stop when there is activity within them. I've taken the current code
and wrapped it in a function that loops the panel animations at a set
pace. The code for this isn't as elegant as I'd like, but I'm having
to work with what the previous developer established. This is the
loop:
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 panels loop as they're supposed to. The issue I'm having is
getting them to stop when there's activity within the "media" div that
holds all of this mess. I attempted to use the .hover listener
with .mouseover and .mouseout events. This seems like the best way to
do it, but this method still had issues:
$('#media').hover(function() {clearInterval(loop);}, function()
{setInterval(loop,36000);});
The looping wont stop when the mouse enters the "media" div. Does
anyone have any ideas for a solution? I'd really appreciate the help.
Thanks in advance.
