Question

我希望在动画完成之前禁用“点击”事件。

Mark Up

<ul>
    <li data-name="item1" class="nav">Item 1</li>
    <li data-name="item2" class="nav">Item 2</li>
</ul>

这是我的jQuery代码

$('.nav').live('click', function(){
     $('.nav').unbind('click');

     var itemId = $(this).data('name');

     if( itemId === 'item1') {
         $('#item1').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    } else if( itemId === 'item2') {
         $('#item2').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    }
});

以上代码似乎不起作用。我如何解决它？ [如果我在'第1项动画完成'之前点击'第2项'，'第2项'也会开始制作动画。我希望能够一次只动画一个]

Answer 1

你可以试试这个：

$(".nav").click(function(){
  if ($('#item').is(':animated'))
  {
      return false;
  }
  ...
});

Answer 2

使用.bind，因为.live（）绑定到文档。

$('.nav').bind('click', function(el, ev) {
    clickme($(this), ev)
});


function clickme(obj, ev) {
    obj.unbind(ev);
    console.log(obj.css('margin-left'));
    var dest = 0;
    if (obj.css('margin-left') == '0px') {
        dest = '300';
    }
    obj.animate({
        'margin-left': dest
    }, 3000, function() {
        obj.click(function() {
            clickme(obj)
        })

workig示例：http://jsfiddle.net/oceog/CzkBu/

Answer 3

您可以使用：animated selector来检查其中一个元素是否已被动画：

$('.nav').live('click', function(){
     $('.nav').unbind('click');

     var itemId = $(this).data('name');
     var animated = $('.nav:animated').length;
     if( itemId === 'item1' && animated === 0) {
         $('#item1').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    } else if( itemId === 'item2' && animated === 0) {
         $('#item2').animate({
             'left' : '300'
         }, 300, function(){
             $('.nav').bind('click');
         });
    }
});

Answer 4

您可以在播放动画时将布尔值设置为false，并在动画结束时将其设置为true。在单击处理程序中，如果布尔值为true，请执行要在单击上执行的操作。

Answer 5

这是我需要的项目之一的代码。点是在开头做一些变量，把它设置为1，然后单击u检查var是否为1，如果是则继续动画，然后在下一行中将变量设置为0或除1以外的任何其他内容，并在动画结束后再次将其设置为1。我需要淡入/淡出。无论如何，这是非常简单的方法。这是代码：

var available = 1;
    $('a.contact').click(function(){
        console.log(available);
        if( available == 1) {
            available = 0;
            $('.red-arrow').fadeIn('slow', function(){
            $(this).delay(2800).fadeOut('slow', function(){
                available = 1;
            });

        });
        }

    })

如何在动画完成之前禁用点击事件？

5 个答案: