jQuery动画总是相同的速度

我想改变我的jQuery动画的速度，使它始终是相同的速度。我有4个div让动画背景图片在mouseenter上的位置动画。我现在看到动画总是有不同的速度，它总是需要2500毫秒。我希望速度始终如一，这怎么可能？jQuery动画总是相同的速度

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

来源

2014-02-25 Daan Heskes

我觉得速度不同的原因是因为你设置需要多长时间动画去从当前位置到结束帧。如果你已经达到了一半的速度，那么速度会快两倍，因为这里有一半的链接可以帮助https://stackoverflow.com/questions/2331234/how-to-make-constant-animation-使用-jquery – Alex

这是因为'animate'在你给的时间内做了什么。就你而言，你在2.5秒内将背景移到一边或另一边。例如，如果从图像左侧开始动画，它将持续2.5秒将整个图像向右移动。如果从中心开始动画（图像居中），它将持续同时推进一半像素，因此效果会更慢。 – ojovirtual

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

从我的评论下面的，这实际上似乎是答案。这jQuery插件应该有所帮助。只需致电，例如：


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

，而不是动画功能，它会处理剩下的

来源

2014-02-25 15:11:29 Alex

http://jsfiddle.net/PqPvz/2/这似乎不工作（可能是因为我使用背景位置？） –

jQuery动画总是相同的速度

回答

相关问题