使用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在列表中將列表項添加到右側

回答

相關問題