Rotate either up or down using jQuery

Question

I have a simple drop-down menu, which is opened by a triangle (caret) symbol. I need to rotate caret upside-down (180 degrees), when the menu is opened, and go back to default position, when it is closed back. Ideal is to achieve this without engaging css classes, which would be the most commonly suggested solution, when I was looking up for the answer.

I have tried to use ternary operator on click, like this:

    $(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)');

But it won't work; it rotates once - upside down - but does not go back to default position on next click. I have tried also with 'rotate(0deg)' and 'rotate(360deg)', same effect (no effect actually). What statement should I use instead?

Also it would help if you posted more code, specifically the HTML. — garek007, Mar 06 '17 at 19:13
have you console.log( $(this).css('transform') ) to see if the returned value is actually "rotate(180deg)" ? — macramole, Mar 06 '17 at 19:15

score 0 · Answer 1 · edited May 23 '17 at 12:00

0

Try it like the answer here jQuery toggle CSS? Using Jquery toggle. Although I'm not sure why you're avoiding CSS classes, that would make it super easy.

edited May 23 '17 at 12:00

Community

1
1

answered Mar 06 '17 at 19:12

garek007

395
4
15

Thank you, it seems I have no other choice. – Lafioka Mar 06 '17 at 21:18

score 0 · Answer 2 · answered Mar 06 '17 at 19:13

css('transform') has it's own timeline. the first time ran, it reached to end of the timeline. You can't expect it to restart the timeline again.

What I've been found out is that, you could.. "Rather hacky", add timeout to the statement. when timeout initiated (even timer is 0ms), the css will refresh and take a second change of the css property once again.

That's the reason why people did it in JS to add css classes. because when you add or remove a css class. You simply force browser to re-render, so the timeline of that css property got reset.

Thank you! This is really well explained. – Lafioka Mar 06 '17 at 21:16 — Lafioka, Mar 06 '17 at 21:16

score 0 · Accepted Answer · answered Mar 06 '17 at 19:29

As described in the documentation the value of transform property is not rotate....

Because you need only toggle between rotate and not you can change the test from :

$(this).css('transform', ($(this).css('transform') == 'rotate(180deg)') ? 'none' : 'rotate(180deg)');

to:

$(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(20deg)' : 'none');

An example:

$('p').on('click', function(e) {
    console.log($(this).css('transform'));
    $(this).css('transform', ($(this).css('transform') == 'none') ? 'rotate(180deg)' : 'none');
})

p {
    border: solid red;
    margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>Transformed element</p>

Thanks! You're right, I should have checked the value in first place. — Lafioka, Mar 06 '17 at 21:17

Rotate either up or down using jQuery

3 Answers3