在jQuery中切換CSS屬性？

Question

我有一個滑動菜單，單擊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 
     }); 
    }); 

Answer 1

也許只是像你這樣的#navigation一個：

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

Answer 2

只需添加一個類來檢查NAV擴展/移動或不。

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

注意這些數字可能需要翻轉。

Answer 3

我認爲你需要做這樣的事情：

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); 
    }; 
});