クリックイベントを伴うjqueryアニメーション

Question

アニメーション中にクリックイベントをバインドしたい場合は、次のコードは成功しますが、addscore() funcitonはそれ以上解決しませんか？

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); 
    } 

Answer 1

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"); 
     } 
    }); 
} 

Answer 2

bind（）メソッドとunbind（）メソッドを使用すると簡単に解決できます。下記のようにコードを変更してください。

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

Answer 3

あなたのイベントをバインドとアンバインドするfonction「オン」「オフ」とを使用することができます。

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