带有点击事件的jquery动画

Posted 2023-05-08

【中文标题】带有点击事件的jquery动画

【英文标题】：jquery animation with click event

【发布时间】：2017-01-19 17:17:40

【问题描述】：

我想在动画中绑定一个点击事件，下面的代码是成功的，但是addscore()函数会做多次，如何解决？

function moveObstacle(target,distance)
        target.removeClass('animated bounce');
        target.animate( left: distance ,
            duration: 10000,
            progress: function(now, fx)
                $(this).addClass('animated bounce');
                $(this).click(function()
                    $(this).hide();
                    addscore();
                );
            
        ); 

    


function addscore()
        score2++;
        if(score2 == 10)
            score1++; score2 = 0;
        
        $('.scoreNum').eq(0).html(score1);
        $('.scoreNum').eq(1).html(score2);
    

【问题讨论】：

每次触发进度回调时，您都在绑定一个新的点击事件，这是为什么呢？！

我只想要在动画期间单击图像会添加分数的东西

【参考方案1】：

一个选项是在进度函数之外分配点击事件处理程序并检查:animated

不清楚为什么需要“动画弹跳”类，所以留下了这个，但问题似乎不需要 - 你可以用它来检查是否动画。

还添加了完成：时间到时隐藏目标的动作。

function moveObstacle(target,distance)
    target.removeClass('animated bounce');
    target.click(function() 
        if ($(this).is(":animated")) 
            $(this).hide();
            addscore();
        );
    );
    target.animate( left: distance ,
        duration: 10000,
        progress: function(now, fx)
            $(this).addClass('animated bounce');
        ,
        complete: function() 
            $(this).hide();
        
    ); 

另一种方法是在点击开始时分配点击并在停止时将其移除：

function moveObstacle(target,distance)
    target.removeClass('animated bounce');
    target.click(function() 
        $(this).hide();
        addscore();
    );
    target.animate( left: distance ,
        duration: 10000,
        progress: function(now, fx)
            $(this).addClass('animated bounce');
        ,
        complete: function() 
            target.off("click");
        
    ); 

【参考方案2】：

您可以使用 bind() 和 unbind() 方法简单地解决它。如下所述更改您的代码。

$(this).unbind('click').bind('click'function()
    $(this).hide();
    addscore();
);

【讨论】：

我真的不明白为什么 OP 会在进度回调中设置它

是的，对，我也在等待你在评论中提出的问题的答案。但无论如何这是一个解决方案。

【参考方案3】：

您可以使用 'off' 和 'on' 函数来绑定和取消绑定您的事件：

$(this).off('click').on('click', function()
    $(this).hide();
    addscore();
);

另一种方法是仅在动画开始时绑定事件（A.Wolff 建议）

 target.animate(
   left: distance
 , 
   duration: 10000,
   start: function(fx) 
     $(this).click(function() 
       $(this).hide();
       addscore();
     );
   ,
   progress: function(now, fx) 
     $(this).addClass('animated bounce');
   
 );

【讨论】：

这只是关于错误代码逻辑的解决方法。至少 OP 应该使用start 而不是progress。最好只委托点击事件