jquery - 如何在鼠标悬停时连续点击？

Question

我很确定这有一个简单的解决方案。我正在使用 jCarousellite，我想更改内置导航按钮的行为以在悬停时触发。

$("#carousel").jCarouselLite({


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

});

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

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

});

但它只在鼠标悬停时触发一次，我需要它在鼠标悬停时连续触发。

Answer 1

我的代码也有同样的问题，然后我想出了这个解决方案..

$(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.
});
});

这对我有用。希望它可以帮助你。

Answer 2

您可以setInterval在悬停时开始定期触发事件，并clearInterval在用户停止悬停时停止它。假设您使用的插件支持这样的 API，那么触发您想要的实际行为而不是触发点击事件也会更清晰。像这样的东西：

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

Answer 4

您可以像这样设置单击的间隔，只需对相反的按钮执行相同操作：

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