jQuery 动画相对位置（悬停时）错误，答案

【问题标题】：jQuery animate relative position (on hover) bug,jQuery 动画相对位置（悬停时）错误，
【发布时间】：2011-04-08 13:31:21
【问题描述】：

只要以下代码在 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);
    });
});

注意：在上图中，文字只是一个，其他的显示是为了便于理解。您必须快速捕捉到相同的效果。

【问题讨论】：

@Val 快速尝试一下，就像在链接周围旋转一样...
哦，好吧，我明白了，哈哈 :) btw "-=4px" 我认为是将某些内容增加 4px，就像您使用 i++; inc 一样，在这种情况下，这意味着 `top+4px "等等

标签： javascript jquery hover

【解决方案1】：

我认为您可以将鼠标悬停时的顶部设置为 -4px，鼠标存在时设置为 0px

$(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);
    });
});

【讨论】：

谢谢，:-) 现在好多了！虽然它仍然升起，但至少它回到了原来的位置。
文本是否仍有可能被限制在特定区域，因此如果试图越过它，它会弹回原来的位置？
您也可以采用 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;}