javascript - 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);
    });
});

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

Answer 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);
    });
});