.animate() 不工作？答案

【问题标题】：.animate() not working?.animate() 不工作？
【发布时间】：2011-09-02 03:02:56
【问题描述】：

无法使我的背景图像的位置动画

$(function() {
$('#nav1').bind('click',function(event){
        $('ul.nav').stop().animate({backgroundPosition: 'right top'}, 1000); 
});
    $(function() {
    $('#nav2').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 38px'}, 1000); 
});
    $(function() {
    $('#nav3').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 76px'}, 1000); 
});
    $(function() {
    $('#nav4').bind('click',function(event){
            $('ul.nav').stop().animate({backgroundPosition: 'right 114px'}, 1000); 
});

和html代码是

<ul class="nav">
<li><a href="#what"  id="nav1">what</a></li>
<li><a href="#who" id="nav2">who</a></li>
<li><a href="#portfolio" id="nav3">portfolio</a></li>
<li><a href="#contact" id="nav4">contact</a></li>
</ul>

我试过不使用像这样的像素 {backgroundPosition: '0 38'} 但它仍然没有动画它只是改变了位置

还有另一个问题。我为菜单中的每个项目重复jquery代码，你能不能把它做成一个函数，每个项目的位置垂直移动38px。谢谢，

【问题讨论】：

@attack 感谢插件的作用就像魅力但不是位置保持静止的功能我认为它需要一些数学函数！
哎呀，我的错！更新后的功能是你需要的吗？
我很确定你需要使用有效的数字才能让它工作，我不认为它可以计算文本值右、左、中心等
@attack 干得好，我刚刚用“ul.nav”替换（这个）并且工作得很好。非常感谢

标签： javascript jquery html jquery-animate

【解决方案1】：

不是你。

jQuery 本身并不支持背景位置动画。但是，有一个很棒的插件： http://www.protofunc.com/scripts/jquery/backgroundPosition/

这是您要求的功能：

$(function() {
    $('ul.nav a').each(function(i, elem) {
        $(elem).bind('click', function(event) {
            event.preventDefault();
            var offset = i * 38;
            $(this).stop().animate({backgroundPosition: '0 ' + offset + 'px'}, 1000); 
        });
    });
});

【讨论】：

【解决方案2】：

我建议使用CSS3 transitions 和jQuery.CSS() 来触发转换。

【讨论】：

【解决方案3】：

'right 38px' 不是background-position 的有效值。修复它，它应该可以工作。

【讨论】：