Переключить свойство css в jquery?

У меня есть меню, которое открывается при нажатии на класс nav-toggle.

Теперь я также хочу, чтобы класс nav-toggle (значок меню) перемещался вдоль 226px справа, поэтому он перемещается одновременно с меню #navigation. Затем, если щелкнуть снова, он скроет меню (как это в настоящее время) и вернется right:0.

Смотрите мои комментарии в третьей последней строке

jQuery('.nav-toggle').click(function () {
 var $marginLefty = jQuery('#navigation');
 $marginLefty.animate({
 right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
 });
 jQuery('.nav-toggle').animate({
 right: "226px" 
 // How do I make it so if it is at 226px when clicked
 // it should then go to "right: 0", that toggle effect as above
 });
 });
3 ответа

Возможно, так же, как вы сделали #navigation:

jQuery('.nav-toggle').animate({
 right: parseInt(jQuery('.nav_toggle').css('right'), 10) == 0 ? "226px" : 0;
 });


Я думаю, вам нужно сделать что-то вроде этого:

jQuery('.nav-toggle').click(function () {
 var $marginLefty = jQuery('#navigation');
 $marginLefty.animate({
 right: parseInt($marginLefty.css('right'), 10) == 0 ? -$marginLefty.outerWidth() : 0
 });
 if ($('.nav-toggle').css('right') == '0px') {
 $(".nav-toggle").stop().animate({right: '226px'}, 1000);
 } else {
 $(".nav-toggle").stop().animate({right: '0px'}, 1000);
 };
});


Просто добавьте класс, чтобы проверить, расширена или перемещена навигация.

var navbar = $('.nav-toggle'); 
if (navbar.hasClass('expanded'))
 {
 $(navbar).animate({'right':'226px'}).removeClass('expanded');
 } else {
 $(navbar).animate({'right':'0px'}).addClass('expanded');
 }

Обратите внимание, что этим номерам может потребоваться перелистывание.

licensed under cc by-sa 3.0 with attribution.