Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 5 down vote favorite
5

In this example; i am trying to create a jQuery animation with css3 rotate property. I can manage this animation with css3 transition and jQuery css() but i want to do this with jQuery animate() for rotating deg value according to my jQuery variatons.

Is it possible use animate with css3 property value with jQuery 1.8.0?

Here is jsFiddle to inspect.

jQuery:

var rotateVal = 90;

//this method isn't working
$('.red').animate({
    'transform':'rotate('+rotateVal+'deg)'
},500);


//this way works but i don't want to do this with transitions
$('.black').css({
    'transform':'rotate('+rotateVal+'deg)',
    'transition':'1s'
});​

html:

<span class="black"></span>
<span class="red"></span>

Edit: Vendor prefixes removed, like -webkit-. Thanks to Kevin B.

share|improve this question
Be sure to use -ms-transform as well (I added a fiddle in the comments of the answer), otherwise it won't work in IE9. – blesh Aug 28 '12 at 13:29
@blesh It is working just fine on ie9 without -ms-trasnform. Kevin B. mentioned this issue on his answer; jQuery 1.8 fixes that: "note that in 1.8.0 i don't think you need to specify all the vendor prefixes." – Barlas Aug 28 '12 at 13:52
Hmmm, the reason I added it is because I tried it in IE9 and it didn't work. It is, however, working now. – blesh Aug 28 '12 at 13:55
I swear. haha. So weird. I mean, i tried it, and it didn't work, and I thought, "Huh? well I wonder what needs done to make it work?" Maybe there was a glitch in jsfiddle and it loaded the wrong JQuery? – blesh Aug 28 '12 at 13:56

3 Answers

up vote 4 down vote accepted
+150

It is possible, but it isn't easy.

var red = $(".red"),
    rotateVal = 90;
$("<div />").animate({
    height: rotateVal
},{
    duration: 500,
    step: function(now){
        red.css('transform','rotate('+now+'deg)');
    }
});

This basically creates a fake animation of a detached div, then on each step, updates the rotation of the target div.

Edit: Oops! wrong argument order. Here's a demo. http://jsfiddle.net/qZRdZ/

note that in 1.8.0 i don't think you need to specify all the vendor prefixes.

Using this method, you can animate almost anything as long as you keep in mind that things like += and -= won't work properly unless coded for.

Update: Here's a combination of my solution and cuzzea's solution abstracted behind a function. http://jsfiddle.net/qZRdZ/206/

$.fn.rotate = function(start, end, duration) {
    console.log(this);
    var _this = this;
    var fakeDiv = $("<div />");
    _this.promise().done(function(){
        _this.animate({"a":end},{duration:duration});
        fakeDiv.css("height", start).animate({
            height: end
        }, {
            duration: duration,
            step: function(now) {
                _this.css("transform", "rotate(" + now + "deg)");
            },
            complete: function() {
                fakeDiv.remove();
            }
        });
    });

    return _this;
};

var red = $('.red');
red.click(function() {
    if ( !$(this).is(':animated') ) {

        red.rotate(45,135,500);
        setTimeout(function(){
            red.rotate(135,190,500);
        },750);
        setTimeout(function(){
            red.rotate(190,45,500);
        },1500);
    }
});

});

share|improve this answer
Why are you using height property in animate for rotateVal? And what is step: method ? Is that animate's easing or complete method? – Barlas Aug 21 '12 at 21:13
It is a separate method that gets called on each step of the animation. I used height, you can use any css property such as height, width, padding-left, etc. Any numerical css property that can be animated. It's purpose is simply to fire the step method with an accurate now value – Kevin B Aug 21 '12 at 21:15
your answer and your jsFiddle has a different point, you define css porperties to $("<div />") selector, why these css properties there? and why didn't you just use $('.red') selector over there? – Barlas Aug 22 '12 at 19:03
1  
the .css was left over from testing, it isn't needed. jsfiddle.net/qZRdZ/13 – Kevin B Aug 22 '12 at 19:12
2  
I used $("<div />") because i wanted to do the height animation on a fake element so that it wouldn't impact the page. – Kevin B Aug 22 '12 at 19:13
show 19 more comments
up vote 3 down vote

Kevin is corect, almost. :)

Here is working jsFiddle.

You don't have to use another element and height, you can do something like:

var red = $('.red'),
max_rot = 45,
start_from = 90;

red.css({a:0}).animate(
    {'a':1},
    { step: function(value,tweenEvent)
       {
         rotateVal = start_from + max_rot * value;
         red.css({
           'transform':'rotate('+rotateVal+'deg)',
         });
       }
     },
1000);​

The ideea is simple. First we create a bogus css property 'a' and set it to 0, and then we animate it to 1, so the step function will give you a value of 0 to 1 that you can use to set the custom transform.

share|improve this answer
Thanks for detailed answer mate, +1 from me. I've got lost of questions on this jsFiddle and most important question is: Why @KevinB 's answer returns true rotateVal = 90 value and your answer's value is returns different, which should be 90. I think there is a problem with rotateVal formula. – Barlas Aug 25 '12 at 20:24
@cuzzea if you reorganize it like this I think it makes more sense: jsfiddle.net/qZRdZ/44 – Kevin B Aug 25 '12 at 21:28
1  
@barlasapaydin you just have to adjust the variables: jsfiddle.net/qZRdZ/45 – Kevin B Aug 25 '12 at 21:30
1  
@cuzzea It seems that using 'a' on the target element won't allow you to use a start position that isn't 0. jsfiddle.net/qZRdZ/113 just an FYI. I had to go back to using fakeDiv. – Kevin B Aug 30 '12 at 14:55
1  
Updated the example to start from 0, it works jsfiddle.net/qZRdZ/125 – cuzzea Aug 30 '12 at 19:23
show 1 more comment
up vote 0 down vote

An alternative method would be to use jQuery to change the dom to something that css would respond to.

We can set our css to look like this:

.object {
    -webkit-transition:all .4s;
    -moz-transform:all .4s;
    -o-transform:all .4s;
    -ms-transform:all .4s;
    transform:all .4s;
}
.object[data-rotate="false"] {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    -ms-transform:rotate(0deg);
    transform:rotate(0deg);
}
.object[data-rotate="true"] {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}

Our jQuery would look like this:

$('#trigger').live('click',function(){
    if($('.object').attr('data-rotate') = true) {
        $('.object').attr('data-rotate',false);
    }
    else {
        $('.object').attr('data-rotate', true);
    }
});

Obviously, the browser has to support the ability to transform whatever animation you want to run, so its its hit or miss depending on the type of animation, but its nicer to work with if you have a ton of stuff going on or you have some children you want to animate concurrently.

Example fiddle: http://jsfiddle.net/ddhboy/9DHDy/1/

share|improve this answer
Thanks for your try but read the title mate: "without using css transitions?" – Barlas Mar 29 at 14:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.