How do i fire a click continuously while something is hovered?

Question

Im pretty sure this has a simple solution. I am using jCarousellite, and i want to change the behaviour of built in nav buttons to fire on hover over.

$("#carousel").jCarouselLite({


 vertical: true,
 btnNext: ".btn-down",
 btnPrev: ".btn-up",
 visible:6,
 circular: false

});

$("#carousel .btn-down").hover(function() {

 $("#carousel .btn-down").click();

});

but it only fires once when mouseover, i need it to fire continueously while mouseover.

Answer 1

You can use setInterval to begin triggering the event at regular intervals on hover and use clearInterval to stop it when the user stops hovering. It'd also be cleaner to trigger the actual behavior you want instead of triggering a click event, assuming the plugin you're using supports such an API. Something like this:

var effectInterval;

$('#carousel .btn-down').hover(function() {
  effectInterval = setInterval(function() {
    $('#carousel').advanceToNextImage(); // sample API call, check your plugin's docs for how it might actually be done
  }, 5000);
}, function() {
  clearInterval(effectInterval);
});

Answer 2

You can set an interval for clicking like this, just do the same for the opposite button:

$("#carousel .btn-down").hover(function() {
  $(this).data("to", setInterval(function() { $("#carousel .btn-down").click(); }, 200));
}, function() {
  cancelInterval($(this).data("to"));
});

Answer 3

var nav = function() {
  $("#carousel .btn-down").click(); // next move
  $("#carousel").data(
    'hover', 
    window.setTimeout(nav, 1000); // continue in 1000 ms
  );
};
$("#carousel .btn-down").hover(
  nav,
  function() {
    window.cancelTimeout ($("#carousel").data('hover')); // stop the navigation
  }
);