Анимация переключения jQuery работает только при двойном щелчке - PullRequest
Новая
       1

Анимация переключения jQuery работает только при двойном щелчке

0 голосов
/ 25 января 2012

У меня проблема, когда вы нажимаете красную кнопку, запускается анимация, а затем, если вы нажимаете синюю кнопку, она не работает, но при двойном щелчке она работает

Вот JSFiddle

Ответы [ 2 ]

1 голос
/ 25 января 2012

Причина возникновения проблемы в том, что между кнопками 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');
}
1 голос
/ 25 января 2012

попробуйте так 

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