如何在悬停某物时连续单击?

发布于 2024-08-24 19:35:51 字数 342 浏览 8 评论 0原文

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

$("#carousel").jCarouselLite({


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

});

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

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

});

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

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

隱形的亼 2024-08-31 19:35:51

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

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

这对我来说很有效。希望对您有帮助。

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.

落叶缤纷 2024-08-31 19:35:51
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
  }
);
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
  }
);
铜锣湾横着走 2024-08-31 19:35:51

您可以使用 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);
});

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);
});
落日海湾 2024-08-31 19:35:51

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

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

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"));
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文