jquery - 如何旋转菜单的人字形

Question

我试过使用插件(虽然我不知道我做的对不对)但它们似乎不起作用。我试图让 V 形图像在单击时旋转，但它不起作用。我正在使用 jquery 并希望它留在我的导航栏上的同一个位置。 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............

Answer 1

你的 fiddle 有一些额外的字符阻止了 jQuery 的运行。要旋转箭头，您可以使用 CSS 转换和 jQuery .css() 方法。

新 CSS

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

新的 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)'
        });
    });
});

这是一个有效的 fiddle .