I'm currently working on a website at
The top menu on this site should scroll when hovering over arrows, but it only moves once with hover. I would like it to keep moving infinitely until the mouse is removed from the area.
How can I achieve this effect? I tried using a carousel, but without success.
Additionally, there are some "hiccups" in the movement, possibly due to timing. How can I make the scrolling smoother?
<div class="row-fluid" style="position:relative;">
<div class="span12 horizontal-category" style="height: 64px">
<span class="carousel-prev" id="carousel-category-prev"></span>
<div class="j" style="position: absolute; clip: rect(auto, auto, 500px, auto);">
<ul class="nav myCustomNav">
<?php
printCats();
?>
</ul>
</div>
<span class="carousel-next" id="carousel-category-next"></span>
</div>
</div>
<script>
$(document).ready(function(){
$(".myCustomNav li:first").addClass("current");
$(".myCustomNav li:last").addClass("last");
$(".last a").width(120);
carousel();
});
var vel = 350;
var timer;
function carousel(){
$(".carousel-prev").hover(function(){
timer = setInterval(hover_esquerda, vel);
}, function(){ clearInterval(timer); });
$(".carousel-next").hover(function(){
timer = setInterval(hover_direita, vel);
}, function(){ clearInterval(timer); });
}
function hover_esquerda(){
//move left
if ($(".current").size() == 0){
$(".myCustomNav li:first").addClass("current");
}
if ($(".current").nextUntil(".last").size() == 6){
//$(".carousel-prev").addClass("disabled");
} else {
$(".myCustomNav .current").removeClass("current").next().addClass("current");
$(".myCustomNav").animate({
left: '-=' + $(".current").prev().width()
}, 'slow');
}
}
function hover_direita(){
//move right
$(".myCustomNav .current").removeClass("current").prev().addClass("current");
$(".myCustomNav").animate({
left: '+=' + $(".current").width()
}, 'slow');
}
</script>