Question

以下是我的代码。它运作良好，但我没有＆＃39;知道如何添加持续时间并将其简化。而且我还想添加一个回调函数。

    $(".pcs").animate({
        top:height/2-50,
        left:width/2-50,
        width:100,
        opacity:1,
    },{step: function(now,fx){
            $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)');
        }});

Answer 1

.animate（properties [，duration] [，easing] [，complete]）

所以你可以使用

            $(".pcs").animate({
                    top:height/2-50,
                    left:width/2-50,
                    width:100,
                    opacity:1,
                },{step: function(now,fx){
                        $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)');
                    ,
                    duration: 200,// or any numeric value
                    easing: 'linear' // or any supported easing effect, for more easing effect you can used jquery ui
                    }});

检查jquery ui缓动效果

Answer 2

$(".pcs").animate({
      top:height/2-50,
      left:width/2-50,
      width:100,
      opacity:1,
   }, {
      step:function(now,fx){
         $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)');
      },
      duration: /*int*/,
      easing: /*string*/,
      complete: /*function when animation is complete*/
   });

Answer 3

Jquery animate函数的工作原理如下：

element.animate( properties, options );

你可以这样做：

$(".pcs").animate({
    top:height/2-50,
    left:width/2-50,
    width:100,
    opacity:1},{
        duration: 1000,/*A string or number determining how long the animation will run. (1000 = 1 second)*/
        easing: "linear",/*A string indicating which easing function to use for the transition.*/
        step: function(now,fx){
            $(".pcs").css('-webkit-transform','rotate(' + now + 'deg)');
        },
        complete: function() {
            // Animation complete.
        }
    }
);

要查找更多详细信息，您可以查看http://api.jquery.com/animate/

如何为animate（）设置持续时间和缓动属性

3 个答案: