只要动画有效，尝试停止jQuery click事件

Question

我有一个内容滑块，此外，我还单击了“上一个”和“下一个”按钮。 仅当动画完成（动画持续时间为500ms）时，才可以单击按钮。 我试图用：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');
    });
}

或者很简单，我需要在单击后将按钮click事件停止500ms。 谁能帮我吗？

Answer 1

移动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');
    }
});

您也可以通过执行以下操作使代码变干：

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

Answer 2

您需要在处理程序中使用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');
    }
});

Answer 3

您可以使用.delay() （在jQuery 1.4及更高版本中可用），也可以使用.setTimeOut() 。

http://forum.jquery.com/topic/settimeout-15-6-2010

http://api.jquery.com/delay/