javascript - 使用jQuery将列表项悬停在右边

我试图通过将文本稍微“向右”“凸出”，然后在悬停时再次返回来使悬停的列表项引起更多注意。这就是我所拥有的:

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

填充本来是15px，所以当您将鼠标悬停在列表中的链接上时，填充会增加5px，然后很快又回到15px。问题在于它一次移动了多个元素。有时，它不仅会移动，还会移动其上方或下方的项目。

有什么建议么？

最佳答案

所以，基本上，您想要一个弹跳效果？如果是这样:

var cssOver = { 'padding-left': '25px' },
      cssOut = { 'padding-left': '15px' },
      overDuration = 100,
      outDuration = 100,
      selector = '.ipro_menu ul li';

  $(selector).mouseover(function(){
    var _this = $(this);
    _this
      .clearQueue()
      .animate(cssOver, overDuration, function(){
        _this.animate(cssOut, outDuration);
      });
  });

实时示例:http://bl.ocks.org/3077195

我个人建议使用此插件:http://ricostacruz.com/jquery.transit/