Trigger CSS transform with jQuery more than once

Question

I have some code that successfully rotates a div how I'd like, however, it is only doing it once. I'm assuming this is because the function simply adds the CSS transform properties and once they are added, the browser (I'm using Chrome on Win7) doesn't care if they are added a second time. Is there a way to have the div rotate every time I click, rather than just once?

jQuery

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        });
    });
});

HTML

<div class="hanging-div"><img src="http://placehold.it/65x350"></div>

CSS

.hanging-div {
    margin:0 auto;
    display:block;
    width:200px;
    padding:50px 0;
    transition:all 2s;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transform-origin:50% 0%;
    -moz-transform-origin:50% 0%;
    -webkit-transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;
    -o-transform-origin:50% 0%;
}

And here is the fiddle: http://jsfiddle.net/MrP43/1/

EDIT

I've also tried removing the transform property afterwards, but it doesn't seem to have an effect.

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        }, function(){
                $(this).css({
                    'transform':'',
                    '-ms-transform':'',
                    '-moz-transform':'',
                    '-o-transform':''
                });
        });
    });
});

Does it work if (the 2nd time), you change the numbers (e.g. -360deg to -720deg)? — BlueCacti
– BlueCacti, Commented Dec 26, 2013 at 21:17
You could also try to remove the formatting and re-add it (if ofc this wouldn't cause the div to transform back first) — BlueCacti
– BlueCacti, Commented Dec 26, 2013 at 21:18
@GroundZero I've updated my post with some more details on removing the formatting. I'm still working on changing the 360 to 720. — Dryden Long
– Dryden Long, Commented Dec 26, 2013 at 21:29

Dryden Long · Accepted Answer · 2013-12-26 21:39:42Z

2

Ok, I've figured it out thanks to @GroundZero. I simply made the degree of rotation a variable and subtracted 360 degrees from that variable for each click and now it works as expected. Now I wonder if this is the best way to go about doing this? It works, so I'm not complaining, but if anyone else has any solutions, I'd love to see them. Thanks!

$(function(){
    n = -360;
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate('+n+'deg)',
            '-ms-transform':'rotate('+n+'deg)',
            '-moz-transform':'rotate('+n+'deg)',
            '-o-transform':'rotate('+n+'deg)'
        });
        n-=360;
    });
});

Fiddle: http://jsfiddle.net/tuJjg/

answered Dec 26, 2013 at 21:39

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

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

1 Comment

LinusG. Over a year ago

Super weird behavior. Your approach works, however. Thanks for sharing!

LinusG. · Accepted Answer · 2017-12-11 21:41:42Z

0

Another possible approach would be to reset the transformation manually by reverse-transforming after the animation has finished:

$('.hanging-div').on('click', function(){
    $('.hanging-div').css({
        'transition':'all 0.45s ease-in-out 0s',
        'transform':'rotate(-360deg)' 
    });
    setTimeout(function() {
        $('.hanging-div').css({
            'transition':'all 0s ease-in-out 0s',
            'transform':'rotate(0deg)'
        });
    }, 450); // transition duration goes here (in ms)
});

Note: it does not seem to work when using $(this), not sure why... .

answered Dec 11, 2017 at 21:41

LinusG.

29.4k32 gold badges124 silver badges183 bronze badges

Collectives™ on Stack Overflow

Trigger CSS transform with jQuery more than once

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related