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函数，它将处理其余的

jQuery动画总是一样的速度

1 个答案: