Question

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

Answer 1

试试这种方式

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

Answer 2

您遇到问题的原因是open和close按钮之间没有共享状态。因此，当您单击close按钮并关闭容器时，open仍然认为容器仍处于打开状态，需要两次单击才能产生所需的行为。

您可以使用以下代码，但不使用切换（新jsFiddle）：

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

只有双击时，jQuery切换动画才有效

2 个答案: