JQuery的動畫（）持續時間只適用於一些CSS規則

Question

我想動畫的絕對定位元素的位置，但animate()持續時間參數只適用於一些 CSS規則，而不是其他人。對於width,height,top和left動畫發生在fast，無論我使用什麼值的持續時間。

// add the post to the grid 
    var p = $('.post-bucket .post:nth-of-type(1)').clone(); 
    p.appendTo('.grid'); 

    // animate it 
    p.animate(
     { 
      width: '200px', 
      'padding-top': '200px', 
      opacity: 1.0,3 
      top: '20px', 
     }, 
     1200, 
     function() {} 
    ); 

如果我將持續時間更改爲5000，不透明度會在5秒內正確更改，但其他更改會在大約200秒內生成動畫。

任何想法？

Answer 1

我認爲它應該看起來像

p.animate(
    { 
    width: '200px', 
    paddingTop: '200px', 
    opacity: '1.0', 
    top: '20px', 
    }, 
    1200, 
    function() { 
    alert('done'); 
    } 
); 

Answer 2

那麼它工作正常，你可以在演示中看到。對所有屬性進行動畫處理需要相同的5000毫秒。

$("div").click(function(){ 
 
     // animate it 
 
     $("p").animate(
 
      { 
 
       width: '200px', 
 
       'padding-top': '200px', 
 
       opacity: 1.0, 
 
       top: '20px', 
 
      }, 
 
      5000, 
 
      function() {} 
 
     );  
 
    });

p { 
 
background: red; 
 
opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>Paragraph here</p> 
 
<div>click me</div>

Answer 3

感謝您的答案，但我的問題是，我不得不在元素上一個揮之不去的樣式規則：

transition: all 0.2s ease;

我覺得很奇怪，一個CSS規則這裏覆蓋了一個明確的JavaScript規則，但你去了。