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规则，但你去了。