切换jquery中的css属性？

Question

我有一个点击nav-toggle类的菜单。

现在，我还希望nav-toggle类(菜单图标)从右边沿226 to移动，因此它与#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);
    };
});