Javascript 使用“动画”中的“步长”函数变换和旋转元素

全部,

我正在尝试使用jquery animate和css transform属性创建“往返”动画

我提到过关于在动画中使用步进函数的帖子，然而，我并没有太大的成功。请复习并提出建议

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>   

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

$("#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" ); });

JAVASCRIPT:

<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>   

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

$("#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" ); });

---

下面是原始代码，我不喜欢变换动画（即使它完美地设置了“top”值的动画）

---

---

我不知道什么是

eCurHanger

，但看看这里

您可以使用

now

变量，而不是全局

angle

---

研究了一下。有一些语法错误。我想这是您需要的输出

与我一起工作的代码如下：

$("#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
});
}});

---

很抱歉，我已经更改了代码&忘了去掉这一部分。注意jQuery的转换cssHooks@micha，请你详细说明一下。我已经找出了问题所在（即“旋转”和括号之间不应有任何间距）。但是，我似乎无法在末尾附加回调函数<代码>{step:function（）{}，complete:function（）{alert（“success！”）}@micha，谢谢。如果我能帮上忙，我不想走插件路线。然而，如果我能弄明白的话，你接下来的建议正是我需要的。我需要使用complete参数以间隔运行函数。请你把这个作为你的答案，这样我就可以投票了。谢谢。我似乎仍然无法让它发挥作用。我不知道我做错了什么。我用我原来的代码更新了原来的帖子。非常感谢您对我的错误（包括回调函数）的反馈。您在回调函数方面运气好吗？@Kayote micha在评论中给了您答案