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

一种可能性是：

$(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/