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/

jQuery动画|防止功能触发冗余

2 个答案: