javascript - jQuery 动画总是以相同的速度

Question

我想更改我的 jQuery 动画的速度，以便它始终保持相同的速度。我有 4 个 div，它们为 mouseenter 上的背景图像位置设置动画。我现在看到动画总是有不同的速度，它总是需要 2500 毫秒。我希望速度始终相同，这怎么可能？

HTML:

<div id="imgholder">
<div class="imggridcol" id="linksboven"></div>
<div class="imggridcol" id="rechtsboven"></div>
<div class="imggridcol" id="linksonder"></div>
<div class="imggridcol" id="rechtsonder"></div>
</div>

CSS:

#imgholder {
width:960px;
height:380px;
overflow:hidden;
background: url("http://crispme.com/wp-content/uploads/4379.jpg?pass") no-repeat;
background-position:50% 50%;
background-size:150% 150%;
}

.imggridcol {
width:50%;
height:50%;
margin:0px;
float:left;
}

jQuery:

$("#linksboven").mouseenter(function() {
  $(this).parent().stop().animate({
  backgroundPositionX: '0%',
  backgroundPositionY: '0%'
  }, 2500, "linear");
});

$("#rechtsboven").mouseenter(function() {
  $(this).parent().stop().animate({
  backgroundPositionX: '100%',
  backgroundPositionY: '0%'
  }, 2500, "linear");
});

$("#linksonder").mouseenter(function() {
  $(this).parent().stop().animate({
  backgroundPositionX: '0%',
  backgroundPositionY: '100%'
  }, 2500, "linear");
});


$("#rechtsonder").mouseenter(function() {
  $(this).parent().stop().animate({
  backgroundPositionX: '100%',
  backgroundPositionY: '100%'
  }, 2500, "linear");
});

$(".imggridcol").mouseleave(function() {
 $(this).parent().stop();   
});

JSFiddle demo

Answer 1

http://lukeshumard.github.io/supremation/

根据我的评论，这实际上似乎是答案。这个 jQuery 插件应该有帮助。只需调用，例如:

$("#linksboven").mouseenter(function() {
      $(this).parent().stop().supremate({
      backgroundPositionX: '0%',
      backgroundPositionY: '0%'
      }, 2500, "linear");
});

代替 animate 函数，它将处理其余部分