在动画中使用 Step 函数来变换旋转元素答案

【问题标题】：Using Step function in animate to transform-rotate an element在动画中使用 Step 函数来变换旋转元素
【发布时间】：2012-03-07 14:19:20
【问题描述】：

全部，

我正在尝试使用 jquery animate 和 css 转换属性创建一个“来回”动画。

我参考了this SO post on using step function in animate，但是，我没有取得太大的成功。请查看和建议。

Jsfiddle.net demo

HTML：

<ul id="a">
<li class="cAccessories" id="AccButtons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccRibbons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccLaces"><span>blah blah..</span></li>
<li class="cAccessories" id="AccEmbroider"><span>blah blah..</span></li>
</ul>

CSS：

#a {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 150px;
    height: 150px;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: blue;
}

JAVASCRIPT：

$("#a").animate ({"margin-left": "+=10px"}, {step: function (now, fx) {
$("#a").css ("-moz-transform", "rotate('5deg')");
$("#a").css ("-webkit-transform", "rotate ('5deg')");
$("#a").css ("-ms-transform", "rotate ('5deg')");
$("#a").css ("-o-transform", "rotate ('5deg')");
}, duration: "slow"}, "linear", function ()
{
$("#a").animate ({left: "+=0px"}, {step: function (now, fx) {
$("#a").css ("-webkit-transform", "rotate ('-5deg')");
$("#a").css ("-moz-transform", "rotate ('-5deg')");
 $("#a").css ("-ms-transform", "rotate ('-5deg')");
$("#a").css ("-o-transform", "rotate ('-5deg')");
}, duration: "slow"}, "linear" ); });

以下是原始代码，我不喜欢变换动画（即使它完美地为“顶部”值设置动画）。

iTemplateNo = $(this).attr("id").substr (-1, 1);
eCurHanger = document.getElementById("hanger0" + iTemplateNo);
$(eCurHanger).attr("src", "Img/V2/Hanger.png");
$(eCurHanger).css ({"width": "45px", "height": "35px"});
$(eCurHanger).animate ({top: "+=10px"}, {step: function (angle, fx) {
$(eCurHanger).css ({"-webkit-transform": "rotate ("+angle+"deg)",
      "-moz-transform": "rotate ("+angle+"deg)",
      "-ms-transform": "rotate ("+angle+"deg)",
      "-o-transform": "rotate ("+angle+"deg)"});
   }, duration: 1000}, "linear", function ()
   {
    $(eCurHanger).animate ({left: "+=10px"}, {step: function (angle, fx) {
    $(this).css ({"-webkit-transform": "rotate("+angle+"deg)",
    "-moz-transform": "rotate("+angle+"deg)",
    "-ms-transform": "rotate("+angle+"deg)",
    "-o-transform": "rotate("+angle+"deg)"})
   }, duration: 1000}, "linear" ) });

【问题讨论】：

很抱歉，我已经更改了代码并且忘记了删除这一点。
注意从 jQuery cssHooks 转换
@micha，请您详细说明一下。我已经弄清楚了问题所在（即“旋转”和括号之间不应该有任何间距）。但是，我似乎无法在最后附加回调函数。
cssHooks transform。 {step: function(){}, complete:function(){alert("success!")}}
@micha，谢谢。如果我能提供帮助，我不想走插件路线。但是，如果我能弄清楚，您接下来的建议正是我所需要的。我需要使用完整的参数来间隔运行一个函数。请您将此作为您的答案发布，以便我投票。

标签： javascript jquery css animation transform

【解决方案1】：

我不知道eCurHanger是什么，但是看这里http://jsfiddle.net/8tP9D/

var angle = 0;
$("#a").animate ({"margin-left": "+=200px"}, {step: function (now, fx) {
    angle += 1;
    $(this).css ({"-moz-transform":"rotate("+angle+"deg)",
                  "-webkit-transform":"rotate("+angle+"deg)",
                  "-ms-transform":"rotate("+angle+"deg)",
                  "-o-transform":"rotate("+angle+"deg)"});
}, duration: 5000}, "linear");

您可以使用now 变量来代替全局angle。 http://jsfiddle.net/39pe6/

$("#a").animate ({"margin-left": "+=200px"}, {step: function (angle, fx) {
    $(this).css ({"-moz-transform":"rotate("+angle+"deg)",
                  "-webkit-transform":"rotate("+angle+"deg)",
                  "-ms-transform":"rotate("+angle+"deg)",
                  "-o-transform":"rotate("+angle+"deg)"});
}, duration: 5000}, "linear");

【讨论】：

谢谢。我似乎仍然无法让它工作。我不知道我做错了什么。我已经用我的原始代码更新了原始帖子。将不胜感激有关我哪里出错（包括回调函数）的反馈。
你的回调函数有什么好运气吗？
@Kayote micha 在 cmets 给你答案

【解决方案2】：

研究了一下。存在某些语法错误。这是你需要的输出我认为Click Here!。

与我合作的代码在这里：

$("#a").animate({ textIndent: 5 }, {
        step: function(now,fx)
        {
            $(this).css({
                '-webkit-transform':'rotate('+now+'deg)',
                'transform':'rotate('+now+'deg)',
                '-ms-transform':'rotate('+now+'deg)'});
        },duration:1000,
complete:function() {
  $("#a").animate({ textIndent: -5 }, {
        step: function(now,fx)
        {
            $(this).css({
                '-webkit-transform':'rotate('+now+'deg)',
                'transform':'rotate('+now+'deg)',
                '-ms-transform':'rotate('+now+'deg)'});
        },duration:1000
});
}});

【讨论】：