Jquery .仅以1种方式设置工作动画

我使用jqueryanimate打开和关闭边栏，它在打开边栏时工作正常，但在关闭边栏时不工作

代码如下：

$（函数（）{
$（“#侧边栏_open”）.bind（“单击”，函数（）{
var$内部=$（“#侧栏”）；
$inner.stop（）.animate（{width:'200px'}，{queue:false，duration:600，easing:'swing'}）；
$（“.nav btn”）.html（“”）；
});
$（“#侧边栏_close”）.bind（“单击”，函数（）{
var$内部=$（“#侧栏”）；
$inner.stop（）.animate（{width:'62px'}，{queue:false，duration:600，easing:'swing'}）；
$（“.nav btn”）.html（“”）；
});
});
div#侧边栏{
宽度：62px；
位置：固定；
身高：87%；
左：0；
背景：42515f；
顶部：96px；
垫面：3%；
溢出：隐藏；
}
在动态更换
img
时，您需要使用：

及



另一种方法是在一个函数中使用条件：

$("#sidebar").on("click", '#sidebar_img', function () {

    var $inner = $("#sidebar");
    var sidebarWidth;
    var src;
    if ($inner.hasClass('sidebar_closed')) {
        sidebarWidth = '200px';
        src = 'images/arrow_left.png';
    } else {
        sidebarWidth = '62px';
        src = 'images/arrow_right.png';
    }
    $inner.stop().animate({
        width: sidebarWidth
    }, {
        queue: false,
        duration: 600,
        easing: 'swing',
        complete: function () {
            $inner.toggleClass('sidebar_open sidebar_closed');
            $('#sidebar_img').attr('src', src);
        }
    });

});

在动态更换
img
时，您需要使用：

及



另一种方法是在一个函数中使用条件：

$("#sidebar").on("click", '#sidebar_img', function () {

    var $inner = $("#sidebar");
    var sidebarWidth;
    var src;
    if ($inner.hasClass('sidebar_closed')) {
        sidebarWidth = '200px';
        src = 'images/arrow_left.png';
    } else {
        sidebarWidth = '62px';
        src = 'images/arrow_right.png';
    }
    $inner.stop().animate({
        width: sidebarWidth
    }, {
        queue: false,
        duration: 600,
        easing: 'swing',
        complete: function () {
            $inner.toggleClass('sidebar_open sidebar_closed');
            $('#sidebar_img').attr('src', src);
        }
    });

});

王牌队友！多谢各位@DanBaker很高兴我能帮助你，如果你愿意的话，看看我的第二个例子，有没有办法使img在侧边栏滑动时旋转180*？谢谢@empiric，我意识到我做的是错误的多亏了你的演示，感谢你的帮助！王牌队友！多谢各位@DanBaker很高兴我能帮助你，如果你愿意的话，看看我的第二个例子，有没有办法使img在侧边栏滑动时旋转180*？谢谢@empiric，我意识到我做的是错误的多亏了你的演示，感谢你的帮助！
$("#sidebar").on("click", '#sidebar_img', function () {

    var $inner = $("#sidebar");
    var sidebarWidth;
    var src;
    if ($inner.hasClass('sidebar_closed')) {
        sidebarWidth = '200px';
        src = 'images/arrow_left.png';
    } else {
        sidebarWidth = '62px';
        src = 'images/arrow_right.png';
    }
    $inner.stop().animate({
        width: sidebarWidth
    }, {
        queue: false,
        duration: 600,
        easing: 'swing',
        complete: function () {
            $inner.toggleClass('sidebar_open sidebar_closed');
            $('#sidebar_img').attr('src', src);
        }
    });

});