jQuery - Position element, show it, then animate it

Question

I'm trying to position a hidden div, then show it, and then rotate it with some animation.

Here's what I got so far, which doesn't seem to rotate it at all...

$(this).css({ 'left' : randomNum(offsetStartX, offsetEndX),
    'top' : randomNum(offsetStartY, offsetEndY) });
$(this).show("fast");
var cssObj = {
    msTransform: 'rotate(\'+ rotDegrees + \'deg)',
    '-moz-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    '-webkit-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    '-o-transform' : 'rotate(\'+ rotDegrees + \'deg)',
    'transform' : 'rotate(\'+ rotDegrees + \'deg)' };
$(this).animate(cssObj, "slow");

If I place the CSS for left and top into var cssObj, it rotates it just fine. However, I need it to be positioned, then set to visible, and then rotated with an animation.

How can I do this?

possible duplicate of [Animate element transform rotate](http://stackoverflow.com/questions/5462275/animate-element-transform-rotate) — mgibsonbr, Mar 03 '13 at 01:12
That answer does not really help me. This is actually slightly different than that question. — Solomon Closson, Mar 03 '13 at 01:35
In that case, just wait and the close vote will expire... (that's why I also attempted to answer below, to address your specific requirements) — mgibsonbr, Mar 03 '13 at 01:39

score 2 · Accepted Answer · edited May 23 '17 at 12:21

2

Check this question and it's accepted answer. jQuery animate can not animate non-numeric properties, that's why using rotate(...) as values is not supported. But you can do it with step (animate an arbitrary value, and set a different rotate at each step).

$(this).show("fast",function() { 
    var element = $(this);
    var startDegree = 90;
    var endDegree = 0;
    $({ i:startDegree }).animate({ i: endDegree }, {
        step: function(now,fx) {
            var cssObj = {
                msTransform: 'rotate('+ now + 'deg)',
                '-moz-transform' : 'rotate('+ now + 'deg)',
                '-webkit-transform' : 'rotate('+ now + 'deg)',
                '-o-transform' : 'rotate('+ now + 'deg)',
                'transform' : 'rotate('+ now + 'deg)' };
            element.css(cssObj); 
        },
        duration:500
    },'linear');
});

Note that I started the rotate animation in the callback to show - so it only starts rotating after the element finished showing.

This fiddle was created merging your code and the example code provided in the answer of that other question (and extending to support other browsers as well). You'll need to adapt it so the rotation happens from the source degree to the target degree (using the variables startDegree and endDegree).

edited May 23 '17 at 12:21

Community

1
1

answered Mar 03 '13 at 01:11

mgibsonbr

21,755
7
70
112

How are you setting the `rotDegrees` variable?? I just don't see it? Cause I actually have a variable called `rotDegrees` and it doesn't work when I try your example. – Solomon Closson Mar 03 '13 at 01:32
@SolomonClosson in the original answer, the variable was called `now`, you can rename it this way as not to conflict with your existing variable. It's the first argument for the [`step` callback](http://api.jquery.com/animate/), and it's the current value for the animated property (in this case, `textIndent`). i.e. the `textIndent` was animated from `90` to `0`, and I used this value for `rotDegrees` (but you can use other values as well). – mgibsonbr Mar 03 '13 at 01:37
I give up, I have a variable called, `rotDegrees` that needs to rotate by that much, and this changes in the `each()` for every element. If I change the variable to `now` this doesn't work, cause `now` is UNDEFINED! – Solomon Closson Mar 03 '13 at 01:52
@SolomonClosson I updated my answer to account for that need, now you just have to set `startDegree` and `endDegree` to the values you need (either using from current to target, from current to delta, from fixed to fixed, etc). If this is causing problems to the rest of your code, plase update your question with the relevant parts, so we can help you further. – mgibsonbr Mar 03 '13 at 02:15
This works, but for some reason it is performing the rotation animation 2 times, instead of just once. It could be because I am call the function that does this within the `document.addEventListener("DOMContentLoaded", functionName, false)` Also, where does the `i` variable come in at? Another variable that I'm not seeing defined... – Solomon Closson Mar 03 '13 at 18:58
1

@SolomonClosson `{ i:startDegree }` and `{ i:endDegree }` are two anonymous objects, declared right there, in the function call. `i` is just a field in these objects - and the `animate` function will act on it. In other words, it's a "helper" variable to make the animation possible (since you can't animate the `transform` property directly). About the other problem, I'm afraid I can't help you, since I'm not familiar with `DOMContentLoaded`. I can only suggest looking at [`.ready`](http://api.jquery.com/ready/) if you had not done before. – mgibsonbr Mar 03 '13 at 22:08

jQuery - Position element, show it, then animate it

1 Answers1