jquery - jQueryアニメーション| 機能トリガーの冗長性を防ぐ

Question

次のアニメーションを追跡して、すでに適用されているかどうかを確認するにはどうすればよいですか？通常、オンのときに変数を1またはtrueに設定するだけですが、このアニメーションはクラスに基づいて複数の要素に適用されます。

function animateDiv(what) {  
    $(what).animate({ backgroundPosition:"0px -250px"
    },8000).css('background-position','0px -250px');

    $(what).animate({
        backgroundPosition:"0px 0px"
    },8000).css('background-position','0px 0px'); 
} 


$(document).on( 'hover', '.animation-div', function(){ animateDiv(this); } );

Answer 1

1つの可能性はこれです：

$(document).on('hover', '.animation-div', function() {
    if (!$(this).hasData('done')) {
        $(this).data('done');
        animateDiv(this);
    }
});

Answer 2

これが質問に答えるかどうかはわかりませんが、これのいくつかは役立つかもしれません...

function addAnotherClass($self) {
  $self.toggleClass('another_class_for_reference');
}

$('.animation-div').hover(
  function() {
    var $self = $(this);

    $self.animate({"left": "+=50px"}, "slow");
    $self.addClass('active');
    addAnotherClass($self);
  },
  function() {
    var $self = $(this);

    $self.animate({"left": "-=50px"}, "slow");
    $self.removeClass('active');
    addAnotherClass($self);
  }
);

http://jsfiddle.net/ndreckshage/RBhAZ/