如何旋轉菜單的雪佛龍

Question

我已經嘗試使用插件（雖然我不知道我是否正確），但它們似乎無法正常工作。我試圖讓點擊圖形旋轉，但它不起作用。我正在使用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

你的小提琴有一個問題是防止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。

Answer 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問題