Javascript 在第二次单击jquery时运行相反的.animate

按照注册jQuery时的示例单击，第一次和第二次单击。我可以通过基本上添加折旧后的.toggle函数来解决我的问题

$( "#go" ).click(function() {
var clicks = $(this).data('clicks');
if (clicks) {//on odd clicks this will run
    $( "#wrapper" ).animate({
        paddingLeft: "170px"
        }, 500 );
    $( ".side-nav" ).animate({
        width: "170px",
        fontSize: "14px",

        }, 500 );
}
else{//on even clicks this will run
    $( "#wrapper" ).animate({
        paddingLeft: "38px"
        }, 500 );
    $( ".side-nav" ).animate({
        width: "45px",
        fontSize: "18px",
        left: "215px",
        paddingLeft:"2px"
        }, 500 );

}
$(this).data("clicks", !clicks);
}); 

旧代码

    $( "#go" ).click(function() {
    $( "#wrapper" ).animate({
        paddingLeft: "38px"
        }, 500 );
    $( ".side-nav" ).animate({
        width: "45px",
        fontSize: "18px",
        left: "215px",
        paddingLeft:"2px"
        }, 500 );
    });

---

我需要上面的代码在第二次单击#go时反向运行。我一直在使用.toggle、jQuery UI选项和stackoverflow帖子循环运行，但我似乎无法解决这个问题。

将动画和反转拆分为两个函数，并使用类检查是否必须启动动画或其他，如下所示：

---

通过遵循上的示例。我可以通过基本上添加折旧后的.toggle函数来解决我的问题

$( "#go" ).click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {//on odd clicks this will run
        $( "#wrapper" ).animate({
            paddingLeft: "170px"
            }, 500 );
        $( ".side-nav" ).animate({
            width: "170px",
            fontSize: "14px",

            }, 500 );
    }
    else{//on even clicks this will run
        $( "#wrapper" ).animate({
            paddingLeft: "38px"
            }, 500 );
        $( ".side-nav" ).animate({
            width: "45px",
            fontSize: "18px",
            left: "215px",
            paddingLeft:"2px"
            }, 500 );

    }
    $(this).data("clicks", !clicks);
    });

---

保存当前状态并设置新值的动画。当再次按下时，将动画设置为保存的值等等…我不知道如何保存状态这似乎是一个比我自己的解决方案更优雅的解决方案是的，它遵循JS（我猜所有编程语言都是通用的）最佳实践，即将代码/函数分成小块，以便更好地调试和处理。：-）而且，就像suggets一样，总是避免使用jQuery切换方法。

$( "#go" ).click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {//on odd clicks this will run
        $( "#wrapper" ).animate({
            paddingLeft: "170px"
            }, 500 );
        $( ".side-nav" ).animate({
            width: "170px",
            fontSize: "14px",

            }, 500 );
    }
    else{//on even clicks this will run
        $( "#wrapper" ).animate({
            paddingLeft: "38px"
            }, 500 );
        $( ".side-nav" ).animate({
            width: "45px",
            fontSize: "18px",
            left: "215px",
            paddingLeft:"2px"
            }, 500 );

    }
    $(this).data("clicks", !clicks);
    });