jQuery切换动画仅在双击时有效

我有一个问题，当你按下红色按钮动画开始，然后如果你点击蓝色按钮，它不工作，但在双击它的作品

这里是

试试这个方法

<div class="main">
    <a class="open o"></a>
    <div class="container">
        <a class="close o"></a>
    </div>
</div>


 $('.open').click(function(){
     if($(this).hasClass('o')){

            $('.container').animate({
                right:"-300px"
            }, 500);
            $('.open').animate({
                right:"0px"
            }, 500);

     }else{

            $('.container').animate({
                right:"0px"
            }, 500);
            $('.open').animate({
                right:"300px"
            }, 500);           
        }
 $(this).toggleClass('o','c');  
 $('.close').toggleClass('o','c');   
});

  $('.close').click(function(){
     if($(this).hasClass('o')){

            $('.container').animate({
                right:"-300px"
            }, 500);
            $('.open').animate({
                right:"0px"
            }, 500);

     }else{

            $('.container').animate({
                right:"0px"
            }, 500);
            $('.open').animate({
                right:"300px"
            }, 500);           
        }
  $(this).toggleClass('o','c');  
 $('.open').toggleClass('o','c');    
}); 

$（'.open'）。单击（函数（）{
if（$（this）.hasClass（'o'））{
$（'.container'）。设置动画({
右：“-300px”
}, 500);
$（'.open'）。设置动画({
右：“0px”
}, 500);
}否则{
$（'.container'）。设置动画({
右：“0px”
}, 500);
$（'.open'）。设置动画({
右：“300px”
}, 500);           
}
$（this.toggleClass（'o'，'c'）；
$（'.close'）.toggleClass（'o'，'c'）；
});
$（'.close'）。单击（函数（）{
if（$（this）.hasClass（'o'））{
$（'.container'）。设置动画({
右：“-300px”
}, 500);
$（'.open'）。设置动画({
右：“0px”
}, 500);
}否则{
$（'.container'）。设置动画({
右：“0px”
}, 500);
$（'.open'）。设置动画({
右：“300px”
}, 500);           
}
$（this.toggleClass（'o'，'c'）；
$（'.open'）.toggleClass（'o'，'c'）；
}); 
出现问题的原因是
打开
和
关闭
按钮之间没有共享状态。因此，当您单击
close
按钮并关闭容器时，
open
仍然认为容器仍然打开，需要两次单击才能产生所需的行为

您可以使用以下代码，尽管它不使用toggle（new）：

我知道，但蓝色的按钮必须是打开和关闭容器。。。红色按钮只关闭container@AramMkrtchyan-我修改了代码以保留两个按钮之间的容器状态。
<div class="main">
    <a class="open"></a>
    <div class="container">
        <a class="close"></a>
    </div>
    <div id="containerState" style="display:none;">opened</div>
</div>

$('.open').click(
    function () {
        if ($('#containerState').text() == 'opened')
            CloseContainer();
        else if ($('#containerState').text() == 'closed')
            OpenContainer();
    });

$('.close').click(
    function () {
        CloseContainer();
    });


function OpenContainer()
{
    $('.container').animate({
        right:"0px"
    }, 500);
    $('.open').animate({
        right:"300px"
    }, 500);

    $('#containerState').text('opened');
}

function CloseContainer()
{
    $('.container').animate({
        right:"-300px"
    }, 500);
    $('.open').animate({
        right:"0px"
    }, 500);

    $('#containerState').text('closed');
}