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，那么触发你想要的实际行为而不是触发click事件也会更清晰。像这样：

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

当某些东西悬停时，我如何连续点击一下？

4 个答案: