Question

我正在尝试设置绝对定位元素的位置，但animate()持续时间参数似乎仅适用于某些 CSS规则，而不适用于其他 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毫秒。

＆＃13;

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

＆＃13;

p {
 background: red;
 opacity: 0;
}

＆＃13;

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

＆＃13;

Answer 3

感谢您的回答，但我的问题是我对该元素有一个挥之不去的样式规则：

transition: all 0.2s ease;

我发现奇怪的是，这里的CSS规则会覆盖显式的JavaScript规则但是你去了。

JQuery animate（）持续时间仅适用于某些CSS规则

3 个答案: