Jquery動畫從左到右的寬度

我想在mouseover上動畫從170縮小到150px的菜單元素。我的問題是，使用默認的.animate縮小發生在我的矩形右側，我需要它收縮在左側。我已經嘗試過對左邊距進行動畫處理，但由於在元素內部有文本，因此在動畫期間會右移。Jquery動畫從左到右的寬度

這是我使用

$(document).ready(function(){ 

//When mouse rolls over 
$("#navigation li").mouseover(function(){ 
    $(this).stop().animate({marginLeft:'20'},{queue:false, duration:600, easing: 'easeOutBounce'}) 

}); 

//When mouse is removed 
$("#navigation li").mouseout(function(){ 
    $(this).stop().animate({marginLeft:'0'},{queue:false, duration:600, easing: 'easeOutBounce'}) 
}); 


});

我已經發現了一些其他的答案，這樣實際的代碼，但我不明白的提出的解決方案。

來源

2011-04-11 Andycap

這是默認行爲。改變這種情況的唯一方法是通過CSS

#navigation li { 
float: right; //Sometimes using float funks things up so... 
}

或更改父的CSS和孩子李（更好的解決方案）

#navigation_li's_parent { 
text-align: right; 
} 

#navigation li { 
display: inline-block; 
}

來源

2011-04-11 20:43:53 mattsven

thaaanks！太容易了。當矩形縮小時，文本向左移動，試圖維持我設置的正確填充。我解決了它在「#navigation li a」而不是「#navigation li」中設置填充。 – Andycap 2011-04-12 09:16:03

新的麻煩，試圖要求後續（告訴我，如果你認爲它是更好的打開一個新的問題）：我如何禁用所選鏈接的動畫（例如，如果你在主頁的鏈接首頁不動畫）？通常我使用body類和php來實現它，但是這次是我無法禁用的動畫。謝謝 – Andycap 2011-04-12 09:42:29

我有一個答案，但你已經解決了嗎？ – mattsven 2011-04-12 15:30:52

您可以輕鬆地用CSS定位進行控制。無論是浮游物還是位於左側或右側（相對或絕對）的內部容器。

來源

2011-04-11 20:45:55

Jquery動畫從左到右的寬度

回答

相關問題