如何为菜单旋转 V 形答案

【问题标题】：How to rotate a chevron for a menu如何为菜单旋转 V 形
【发布时间】：2014-01-27 05:11:00
【问题描述】：

我尝试过使用插件（虽然我不知道我是否做得对）但它们似乎不起作用。我试图让一个人字形图像在单击时旋转，但它不起作用。我正在使用 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............

【问题讨论】：

标签： jquery html css navigation

【解决方案1】：

你的小提琴有一些额外的字符阻止了 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。

【讨论】：

【解决方案2】：

我会像这样创建自己的 jQuery 旋转动画函数来做到这一点

$(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

这是基于 yckart's answer 的另一个 SO 问题

【讨论】：