How to combine jQuery animate with css3 properties without using css transitions?

Question

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.

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. — Ben Lesh
– Ben Lesh, Commented Aug 28, 2012 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 Apaydin
– Barlas Apaydin, Commented Aug 28, 2012 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. — Ben Lesh
– Ben Lesh, Commented Aug 28, 2012 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? — Ben Lesh
– Ben Lesh, Commented Aug 28, 2012 at 13:56

user400654 · Accepted Answer · 2013-01-28 18:56:44Z

6

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

});

edited Jan 28, 2013 at 18:56

answered Aug 21, 2012 at 20:55

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

21 Comments

Barlas Apaydin Over a year ago

Why are you using height property in animate for rotateVal? And what is step: method ? Is that animate's easing or complete method?

user400654 Over a year ago

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

Barlas Apaydin Over a year ago

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?

user400654 Over a year ago

the .css was left over from testing, it isn't needed. jsfiddle.net/qZRdZ/13

user400654 Over a year ago

I used $("<div />") because i wanted to do the height animation on a fake element so that it wouldn't impact the page.

|

Barlas Apaydin · Accepted Answer · 2012-08-25 20:01:48Z

3

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.

edited Aug 25, 2012 at 20:01

Barlas Apaydin

7,35511 gold badges60 silver badges88 bronze badges

answered Aug 25, 2012 at 19:31

cuzzea

1,51511 silver badges23 bronze badges

5 Comments

Barlas Apaydin Over a year ago

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.

user400654 Over a year ago

@cuzzea if you reorganize it like this I think it makes more sense: jsfiddle.net/qZRdZ/44

user400654 Over a year ago

@barlasapaydin you just have to adjust the variables: jsfiddle.net/qZRdZ/45

cuzzea Over a year ago

@Kevin B you are right, but it seems you got it better in your answer :)

user400654 Over a year ago

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

ddhboy · Accepted Answer · 2013-01-08 16:24:10Z

0

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/

answered Jan 8, 2013 at 16:24

ddhboy

1164 bronze badges

1 Comment

Barlas Apaydin Over a year ago

Thanks for your try but read the title mate: "without using css transitions?"

Collectives™ on Stack Overflow

How to combine jQuery animate with css3 properties without using css transitions?

3 Answers 3

21 Comments

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

21 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related