Using Step function in animate to transform-rotate an element

Question

All,

I am trying create a 'to & fro' animation using jquery animate & css transform property.

I referred to this SO post on using step function in animate, however, Im not having much success. Please review & advice.

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

Following is the original code, which I doesn't like the transform animation (even though it animates the 'top' value perfectly).

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

My apologies, I had changed the code & had forgotten to take this bit out. — Kayote, Feb 16 '12 at 08:11
@micha, would you please elaborate. I have figured out what the problem is (which is that there shouldn't be any spacing between 'rotate' & brackets). HOwever, I cant seem to attach callback function at the end. — Kayote, Feb 16 '12 at 11:58
[cssHooks transform](https://github.com/brandonaaron/jquery-cssHooks/blob/master/transform.js). `{step: function(){}, complete:function(){alert("success!")}}` — noob, Feb 16 '12 at 15:02
@micha, thank you. I donot want to go down the plugin route if I can help it. However, what you have suggested next is exactly what I need if I can figure it out. I need to use the complete parameter to run a function at interval. Would you please post this as your answer so I can upvote. — Kayote, Feb 17 '12 at 01:53
@Kayote I will not post a answer because this is just jQuery API and Cherry have answered perfectly already. — noob, Feb 17 '12 at 05:49

Cheery · Accepted Answer · 2012-02-16T08:18:16.267

2

I do not know what eCurHanger is, but look here 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");

instead of global angle you could use now variable. 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");

edited Feb 16 '12 at 08:18

answered Feb 16 '12 at 07:53

Cheery

16,063
42
57

thank you. I still cannot seem to get it to work. I dont know what Im doing wrong. Ive updated the original post with my original code. Would be grateful for the feedback as to where I am going wrong (including the callback function). – Kayote Feb 16 '12 at 10:01
have you had any luck with the callback function? – Kayote Feb 16 '12 at 12:31
@Kayote micha gave you an answer in comments – Cheery Feb 16 '12 at 17:23

Mayank Tripathi · Answer 2 · 2013-12-05T18:11:13.970

Researched a bit. There were certain syntax errors. Here is the output you require I think Click Here!.

The code working with me is 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
});
}});

Using Step function in animate to transform-rotate an element

2 Answers2

Linked