javascript - 使用 jQuery 在悬停时将列表项向右碰撞

Question

我试图通过将文本稍微向右“碰撞”一下，然后在悬停在上面时再次返回，来引起对悬停的列表项的更多关注。这就是我所拥有的:

$('.ipro_menu ul li a').hover(function(){
    $(this).animate({
        'padding-left':'20px'},100,function(){
            $(this).animate({
                'padding-left':'15px'});
    });
});

内边距最初为 15 像素，因此当您将鼠标悬停在列表中的链接上时，内边距会增加 5 像素，然后再次快速返回到 15 像素。问题在于它一次移动多个元素。有时它不仅会移动自身，还会移动其上方或下方的元素。

有什么建议吗？

Answer 1

我对我认为你想做的事情做了一个快速的jsfiddle。

http://jsfiddle.net/tuXcA/

代码基本上是:

$('ul').find('li').hover(function() {
    $(this).animate({
        'padding-left':'20px'
    },100);
}, function() {
    $(this).animate({
        'padding-left':'0px'
    },100);
});

悬停时向右滑动，未悬停时滑回到正常位置。