jQuery的動畫填充到零

我有下面的代碼片段徘徊時切換填充（見例如here）：jQuery的動畫填充到零

<div id="outer"><div id="inner"></div></div> 
<script> 
    $("#inner").mouseenter(function() { 
    $("#outer").animate({ 'padding' : '20px' }, "slow"); 
    }); 
    $("#inner").mouseleave(function() { 
    $("#outer").animate({ 'padding' : '0px' }, "slow"); 
    }); 
</script>

的目標是有填充在國內外享有很高的動畫，但是目前沒有動畫出現動畫出來。我做了一些測試，並且如果將假填充更改爲10像素（從0像素），它將運行一個動畫，但從零開始並向外移動。我正在運行jQuery 1.4.3。有任何解決這個問題的方法嗎？

來源

2010-11-04 Kevin Sylvestre

不知道是怎麼回事，但不會動畫內部元素的'margin'屬性呢？ – 2010-11-04 10:05:57

@Freek，如果外部div的尺寸沒有定義，則不是。它會將內部推入左側/頂部，但它會破壞外側，因爲由於定義的尺寸外部無法展開。 – 2010-11-04 10:13:26

@Gaby點採取:) – 2010-11-04 10:16:52

絕對動畫的bug在1.4.3，現在你可以變通的動畫這樣的個別屬性：

$("#inner").mouseleave(function() { 
    $("#outer").animate({ 
    'padding-top' : 0, 
    'padding-right' : 0, 
    'padding-bottom' : 0, 
    'padding-left' : 0, 
    }, "slow"); 
});

You can test it out here。

來源

2010-11-04 10:04:52

謝謝尼克！始終感謝您非常確切的答案。此外，代碼演示很酷的工具！ – 2010-11-04 10:10:25

這個錯誤存在，它不會在動畫後以某種方式存儲填充。即使完全刪除了mouseleave，當您重新輸入div時也會出現問題。動畫重新開始.. – 2010-11-04 10:11:30

@Gaby - 我認爲這是由鼠標位置移動引起的，不知道它爲什麼會被刪除，但是我會在這裏得到一些睡眠或咖啡，然後看看這裏正在發生 – 2010-11-04 10:13:59

看起來像1.4.3（重寫的css部分）中的錯誤。 1.4.2正常工作：

http://www.jsfiddle.net/YjC6y/44/

我會進一步調查，並更新這個帖子。

來源

2010-11-04 10:03:29 jAndy

謝謝安迪。我很欣賞確認它是一個錯誤！ – 2010-11-04 10:12:19

另一種解決方案是使用cssHook。 Brandon Aarons jquery-cssHooks浮現在腦海中（在這種情況下marginpadding.js的padding鉤）

You can test it here

來源

2010-11-04 12:19:51 jitter

我才意識到jQuery是不是反應非常好，以連字符「 - 」動漫之內，但你通過得到的騎得到同樣的結果連字符和大寫後的第一個字母。所以你會有這樣的事情：

$("#inner").mouseleave(function() { 
     $("#outer").animate({ 
    paddingTop : 0, 
     paddingRight : 0, 
     paddingBottom : 0, 
     paddingLeft : 0, 
     borderLeftWidth: 0, 
     borderTopWidth: 0, 
     borderRightWidth: 0, 
     borderBottomWidth: 0, 

}, slow);

來源

2012-09-16 18:21:38 iMad

jQuery的動畫填充到零

回答

相關問題