[英]Trying to stop jQuery click event as long as animation works
I have a content slider, additionally I made "prev" & "next" buttons. 我有一个内容滑块,此外,我还单击了“上一个”和“下一个”按钮。 The buttons should only be clickable when the animation is complete (animations duration is 500ms).
仅当动画完成(动画持续时间为500ms)时,才可以单击按钮。 I tried to solve it with the :animated selector, but it won't work:
我试图用:animated选择器解决它,但是它不起作用:
if (!$(".scrollContainer").is(':animated')) {
$(".nextItems a").click(function() {
$(".slideNavig").find('a.selected').removeClass('selected').parent().next().find("a").addClass('selected');
});
}
if (!$(".scrollContainer").is(':animated')) {
$(".prevItems a").click(function() {
$(".slideNavig").find('a.selected').removeClass('selected').parent().prev().find("a").addClass('selected');
});
}
Or quite simply, I need to stop the buttons click event for 500ms after a click. 或者很简单,我需要在单击后将按钮click事件停止500ms。 Can anyone help me please?
谁能帮我吗?
Move the if statement that checks if the thing is animated inside your click event handler: 移动if语句,检查事件是否在click事件处理程序内动画化:
$(".nextItems a").click(function() {
if (!$(".scrollContainer").is(':animated')) {
$(".slideNavig").find('a.selected').removeClass('selected').parent().next().find("a").addClass('selected');
}
});
$(".prevItems a").click(function() {
if (!$(".scrollContainer").is(':animated')) {
$(".slideNavig").find('a.selected').removeClass('selected').parent().prev().find("a").addClass('selected');
}
});
Also you could dry out your code by doing something like this: 您也可以通过执行以下操作使代码变干:
$(".nextItems a").click(function() {
nextPrevItem('next');
});
$(".prevItems a").click(function() {
nextPrevItem('prev');
});
function nextPrevItem( direction ) {
if (!$(".scrollContainer").is(':animated')) {
$(".slideNavig").find('a.selected').removeClass('selected')
.parent()[ direction ]()
.find("a").addClass('selected');
}
}
You need the if statement inside the handlers: 您需要在处理程序中使用if语句:
$(".nextItems a").click(function() {
if (!$(".scrollContainer").is(':animated')) {
$(".slideNavig").find('a.selected').removeClass('selected').parent().next().find("a").addClass('selected');
}
});
$(".prevItems a").click(function() {
if (!$(".scrollContainer").is(':animated')) {
$(".slideNavig").find('a.selected').removeClass('selected').parent().prev().find("a").addClass('selected');
}
});
You can use .delay()
(available in jQuery 1.4 and higher) or you can use .setTimeOut()
. 您可以使用
.delay()
(在jQuery 1.4及更高版本中可用),也可以使用.setTimeOut()
。
http://forum.jquery.com/topic/settimeout-15-6-2010 http://forum.jquery.com/topic/settimeout-15-6-2010
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.