首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jquery动画步骤的起始值不正确。

jquery动画步骤的起始值不正确。
EN

Stack Overflow用户
提问于 2014-04-26 13:47:14
回答 2查看 989关注 0票数 1

我很难使用jquery的动画方法执行简单的旋转动画。我试图开始一个广场在45度旋转,然后,当点击一个按钮,旋转另一个45度(完成在90)。

然而,当我尝试动画时,正方形首先旋转到0的旋转,然后开始前进到最后的完成点(90度)。

这似乎是因为动画()的"step“选项的"now”参数从0开始,而不是元素的实际起点45度。

对我做错了什么有什么想法吗?

http://jsfiddle.net/agentfitz/btz89/2/

代码语言:javascript
复制
// css
.square {
  transform: rotate(45deg); // starting point
}

// js
$(".square").animate(
    {
        rotation: 90,   
    },    
    {
        step: function(now, tween) {

            var $el = $(this);

            if (tween.prop === "rotation") {

                console.log(now); 
                $el.css('transform','rotate('+now+'deg)');  

            }

        },

        duration: 2000
    }

);
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-04-26 14:04:28

请遵循以下示例:http://jqversion.com/#!/1GLob7P

Javascript代码:

代码语言:javascript
复制
$("a").click(function(e){
    e.preventDefault();

    var initRotation = 0;

    $(".square").animate(
        {
            rotation: 45, // how many degrees do you want to rotate
        },    
        {
            start: function(promise){
              initRotation = getRotationDegrees($(this));
            },
            step: function(now, tween) {

                var $el = $(this);
                if (tween.prop === "rotation") {

                    var newRotation = initRotation + now;

                    $el.css('-webkit-transform','rotate('+newRotation+'deg)');
                    $el.css('-moz-transform','rotate('+newRotation+'deg)'); 
                    $el.css('transform','rotate('+newRotation+'deg)');  
                }

            },
            duration: 2000
        }
    );
});

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle +=360 : angle;
}
票数 2
EN

Stack Overflow用户

发布于 2016-01-06 23:25:10

可以使用start选项自定义属性开始值:

代码语言:javascript
复制
// css
.square {
  transform: rotate(45deg); // starting point
}

// js

var startRotation = 45;

$(".square").animate(
    {
        rotation: 90,   
    },    
    {
        start: function(promise) {
            for (var i = 0; i < promise.tweens.length; i++) {
                var tween = promise.tweens[i];
                if (tween.prop === "rotation") {
                    tween.start = startRotation;
                }
            }
        },
        step: function(now, tween) {
            var $el = $(this);
            if (tween.prop === "rotation") {
                console.log(now); 
                $el.css('transform','rotate('+now+'deg)');  
            }
        },
        duration: 2000
    }
);
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23311798

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档