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.

$(\"#         


        

Answer 1

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() {
  clearInterval($(this).data("to"));
});

Answer 2

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

Answer 3

I too had the same problem with my code, then I came up with this solution..

$(document).ready(function(){
    $("someid1").hover(function a() {  //on hover over some element with id-> someid1  
        $("#someid2").animate({
            width:"+=10" 
        }, function(){
            a();
        });
    }); //execute animation function and call itself again and again on mouseover
});                                                     

$("someid1").mouseout(function() {
    $("#someid2").stop(); //stop the animation on mouseout.
});
});

That did the trick for me. Hope it helps you.

Answer 4

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