I have a infinite carousel that I want to move when I hover over the next and previous buttons. Right now hover only fires this once. I want the carousel to continue moving while the mouse is within the next or previous buttons.

Any Suggestions?

jQuery.fn.carousel = function(previous, next, options){
 var sliderList = jQuery(this).children()[0];

 if (sliderList) {
  var increment = jQuery(sliderList).children().outerWidth("true"),
  elmnts = jQuery(sliderList).children(),
  numElmts = elmnts.length,
  sizeFirstElmnt = increment,
  shownInViewport = Math.round(jQuery(this).width() / sizeFirstElmnt),
  firstElementOnViewPort = 1,
  isAnimating = false;

  for (i = 0; i < shownInViewport; i++) {
   jQuery(sliderList).css('width',(numElmts+shownInViewport)*increment + increment + "px");
   jQuery(sliderList).append(jQuery(elmnts[i]).clone());
  }

  jQuery(previous).hover(function(event){
   if (!isAnimating) {
    if (firstElementOnViewPort == 1) {
     jQuery(sliderList).css('left', "-" + numElmts * sizeFirstElmnt + "px");
     firstElementOnViewPort = numElmts;
    }
    else {
     firstElementOnViewPort--;
    }

    jQuery(sliderList).animate({
     left: "+=" + increment,
     y: 0,
     queue: true
    }, "swing", function(){isAnimating = false;});
    isAnimating = true;
   }

  });

  jQuery(next).hover(function(event){
   if (!isAnimating) {
    if (firstElementOnViewPort > numElmts) {
     firstElementOnViewPort = 2;
     jQuery(sliderList).css('left', "0px");
    }
    else {
     firstElementOnViewPort++;
    }
    jQuery(sliderList).animate({
     left: "-=" + increment,
     y: 0,
     queue: true
    }, "swing", function(){isAnimating = false;});
    isAnimating = true;
   }
  });


 }
};