2

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

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

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

有什么建议么？

4

2 回答 2

6

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

http://jsfiddle.net/tuXcA/

代码基本上是：

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

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

于 2012-07-09T15:35:37.533 回答
1

padding 原本是 15px，所以当你将鼠标悬停在列表中的一个链接上时，padding 会增加 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/

于 2012-07-09T16:20:18.353 回答