How to make jquery hover event fire repeatedly.

Question

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;
   }
  });


 }
};

Answer 1

As for triggering events, see http://api.jquery.com/trigger/

$('#idOfElement').trigger('mouseover'); // or similar

In the case of your plugin, you'll want to capture mouseOut as well. If at the end of your animation, check to see if mouseOut was fired and if not - fire another hover.

For your code, i would refactor it a bit:

(function($){  
jQuery.fn.carousel = function(previousButton, nextButton, options){
 var $sliderList = jQuery(this).children()[0];
 var $previous = $(previousButton);
 var $next = $(nextButton);
 var isAnimating = false;
 var buttonPressed = false;

 function previous(obj) {
   buttonPressed = true;
   // previous animation code
   // when you're done animating, see if buttonPressed is true still (if out was fired, then it's false)
  // if true - call previous again
 }
 function next(obj) {
   buttonPressed = true;
   // next animation code
 }
 function out() {
   buttonPressed = false;
 }

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

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

    $previous.hover(previous, out);
    $next.hover(next, out); // calls next on over, out on exit

  }
};
})(jQuery);