How to rotate a chevron for a menu

Question

I have tried using plugins (although I don't know if I'm doing it right) but they don't appear to work. I am trying to get a chevron image to rotate when it is clicked, but it won't work. I am using jquery and want it to stay in the same place on my navbar. http://jsfiddle.net/clarinetking/2PGZS/19/

$(document).ready(function() {
    $('#CloseMenu').click(function() {
        $('#FixedMenu').fadeToggle('slow');
    });
});

HTML

 <div id='FixedMenu'>
    <button class='MenuItem'></button>
    <button class='MenuItem'></button>
    <img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
    <button class='MenuItem'></button>
    <button class='MenuItem'></button>
</div>
<img id='OpenMenu' src='http://upload.wikimedia.org/wikipedia/commons/f/f5/Chevron_down_font_awesome.svg'>
<img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'>
<p id='Start'>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis etc etc............

score 3 · Accepted Answer · answered Jan 08 '14 at 21:39

Your fiddle had some extra characters that was preventing the jQuery from running. To rotate the arrows, you can use CSS transitions and the jQuery .css() method.

New CSS

#OpenMenu, #CloseMenu {
    position:fixed;
    width:60px;
    height:80px;
    top:0;
    left:85%;
    transition: all 1s;
}

New jQuery

$(document).ready(function() {
    var position = 0;
    $('#CloseMenu').click(function() {
        position+=180;
        $('#FixedMenu').fadeToggle('slow');
        $('#CloseMenu').css({
            '-webkit-transform':'rotate('+position+'deg)', 
            '-moz-transform':'rotate('+position+'deg)',
            '-o-transform':'rotate('+position+'deg)',
            '-ms-transform':'rotate('+position+'deg)',
            'transform':'rotate('+position+'deg)'
        });
    });
});

Here is a working fiddle.

score 0 · Answer 2 · edited May 23 '17 at 12:07

I would do it by creating my own jQuery rotation animation function like so

$(document).ready(function() {
    var degree = 180;
    $('#CloseMenu').click(function() {
        $(this).animateRotate(degree, "slow");
        if(degree == 180) degree = -180;
        else degree = 180;
        $('#FixedMenu').fadeToggle('slow');
    });
});

$.fn.animateRotate = function(angle, duration, easing, complete) {
    var args = $.speed(duration, easing, complete);
    var step = args.step;
    return this.each(function(i, e) {
        args.step = function(now) {
            $.style(e, 'transform', 'rotate(' + now + 'deg)');
            if (step) return step.apply(this, arguments);
        };
        if(angle !== -180) $({deg: 0}).animate({deg: angle}, args);
        else $({deg: -180}).animate({deg: 0}, args);
    });
};

Demo

This is based on yckart's answer on another SO question

How to rotate a chevron for a menu

2 Answers2