jQuery动画相对位置（悬停时）错误问题

Question

无论在Chrome和FF中运行以下代码时，"text"的位置如下所示，如图所示。该脚本应该在mouseover上将"text"提高4px，并在mouseout上返回它。

但是，当鼠标按照下面的方式移动时，每次它都会在其上一位置上升4px。

$(document).ready(function(){
    $('#n #c a').hover(function(){
        $('span',this).stop(true,true).animate({top:'-=4px'},200);
    },function(){
        $('span',this).stop(true,true).animate({top:'+=4px'},400);
    });
});

注意：上面的图片中只有一个文本，其他是为了方便理解而显示的。您需要迅速掌握相同的效果。

- Suraj

---

@Val 快速尝试一下，就像在链接周围旋转的动作... - Suraj

哦，好的，我懂了，哈哈 :) 顺便说一下，“-=4px” 我认为是将某个东西增加 4 像素，就像你会使用 i++; 来增加 1 一样，在这种情况下它意味着 top+4px，以此类推。 - Val

Answer 1

我认为你可以在鼠标悬停时将顶部设置为-4像素，在鼠标退出时将其设置为0像素。

$(document).ready(function(){
    $('#n #c a').hover(function(){
        $('span',this).stop(true,true).animate({top:'-4px'},200);
    },function(){
        $('span',this).stop(true,true).animate({top:'0px'},400);
    });
});

- Thorgeir

---

谢谢，:-) 现在好多了！虽然它还是会抬起来，但至少它会回到原来的位置。 - Suraj

还有可能将文本限制在特定区域，如果尝试越过它，则会反弹回其原始位置吗？ - Suraj

你也可以使用CSS3实现，例如：#c a { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } #c a:hover {margin-top:-4px;} - Thorgeir