Question

我试图通过稍微向右碰撞文本然后在翻转时再次向后移动来更多地关注正在盘旋的列表项目。这就是我所拥有的：

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

填充最初为15px，因此当您将鼠标悬停在列表中的链接上时，填充增加5px，然后再次快速返回到15px。问题是它一次移动多个元素。有时候它不仅会自动移动，还会移动到它上面或下面的项目。

有什么建议吗？

Answer 1

我快速了解了我认为你想要做的事情。

http://jsfiddle.net/tuXcA/

代码基本上是：

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

悬停时向右滑动，然后在不悬停时滑回正常位置。

Answer 2

填充最初为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/

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

2 个答案: