Я пробовал использовать плагины (хотя я не знаю, правильно ли я это делаю), но они, похоже, не работают. Я пытаюсь заставить изображение шеврона поворачиваться, когда его щелкают, но он не будет работать. Я использую 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. Чтобы повернуть стрелки, вы можете использовать переходы 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)'
});
});
});
Вот рабочая скрипка.
Я бы сделал это, создав собственную функцию анимации вращения 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);
});
};
Это основано на ответе yckart на другой вопрос SO