使用jQuery在列表中将列表项添加到右侧

我试图让更多的关注点将鼠标悬停在右侧，然后再将鼠标悬停在上方，然后重新悬停。这是我有：使用jQuery在列表中将列表项添加到右侧

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

的填充原本15px的，所以当你将鼠标悬停在列表中的一个环节，通过为5px填充的增加，然后迅速回到15px的一次。问题在于它一次只能移动一个以上的元素。有时它不仅移动本身，而且移动它上面或下面的项目。

有什么建议吗？

来源

2012-07-09 JROB

我们能看到你的HTML？ jsfiddle也适用于这些类型的问题。 – Lowkase 2012-07-09 15:24:27

也许试试'text-indent'而不是'padding'？ – 2012-07-09 15:25:20

的填充原本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/

来源

2012-07-09 16:20:18

我做了一个很快的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-09 15:35:37 dqhendricks

使用jQuery在列表中将列表项添加到右侧

回答

相关问题