jQuery animate() работает только во втором щелчке

Я создаю меню, которое появляется после щелчка по ссылке, и я пытаюсь использовать jQuery animate(); чтобы скопировать его, а не просто появляться.jQuery animate() работает только во втором щелчке

Проблема, с которой я сталкиваюсь, заключается в том, что она только активирует скользящий бит во второй попытке, хотя кажется, что он делает паузу 500 мс, как если бы это было так.

Я видел несколько других вопросов об этом, но ответы либо «у вас есть определенная ошибка в вашем коде», либо «вам нужно переключать или иным образом подделывать анимацию при загрузке страницы». Я надеюсь, что мой код будет безошибочным, и я не очень хочу использовать переключение для перехвата, чтобы обойти первую анимацию без анимации.

Предположительно это должно работать в первый раз & каждый последующий раз, так что мой вопрос: как я могу заставить анимацию работать в первый раз без исправления/взлома onload?

HTML

<section id="mover"> 
    <div class="menu_Content"> 
    <div class="menu_close"> 
     <a href="#" id="closeMenu">close menu</a> 
    </div> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    <h5><a href="/">[menu link]</a></h5> 
    </div> 
</section> 
<div class="core home"> 
    <header> 
    <div class="menu_link"> <a href="#" id="openMenu">[menu]</a></div> 
    </header> 
    <div class="content"> 
    <h1 class="big-head">[headline one]</h1> 
    <p>[some content]</p> 
    </div> 
</div>

CSS

#mover { 
    background:rgba(47, 47, 47, 1); 
    min-height: 100%; 
    position: absolute; 
    z-index: 2; 
    right: 100%; 
    overflow: hidden; 
    display: none; 
    width: 100%; 
    right: 0%; 
} 
#mover a { 
    width: 100px; 
    height: 60px; 
    color: #fff; 
    text-decoration: none; 
    display: block; 
    padding-top: 10px; 
} 
#mover .menu_close { 
    width: 100px; 
    height: 60px; 
    background: #FF7466; 
    color: #fff; 
    text-align: center; 
}

JS/JQuery

//menu open 
jQuery('#openMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover') 
     .animate({ 
     right: '0%' 
    }, 500, function() { 
     jQuery('#mover').show(); 
    }); 
}); 
//menu close 
jQuery('#closeMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover').animate({ 
     right: '100%' 
    }, 500); 
});

Вот скрипку: http://jsfiddle.net/tymothytym/05gu7bpr/4/

Спасибо!

источник

2014-10-30 tymothytym

+1. Все вопросы должны быть сформированы следующим образом. В стороне, вы рассмотрели использование переходов CSS вместо этого? Это не отвечает на ваш вопрос, но часто это мой предпочтительный подход к браузерной анимации. –

Я хочу, чтобы он работал только на клике, чтобы JS казался таким, но я открыт для любого решения, хотя и предпочитаю вариант CSS. Что такое вопрос? – tymothytym

StackOverflow вопрос. Я напишу вам альтернативу CSS утром. Но в основном, вы переключаете класс с помощью jQuery. У одного класса будет 'right: 0%;', а у другого будет 'right: 100%'. Это будет щелкнуть по щелчку (очевидно), но тогда вы определяете переход следующим образом: «переход: все 3s легкость». «Все» означает, что любая разница в свойствах CSS будет анимирована там, где это возможно, вы могли бы просто «правильно», но я предполагаю, что вы, возможно, захотите поиграть с ней, так что оставите «все». ПРИМЕЧАНИЕ: проверьте наличие '-webkit 'эквиваленты переходных атрибутов и т. д. –

Изменение #mover CSS к этому:

#mover { 
    background:rgba(47, 47, 47, 1); 
    min-height: 100%; 
    position: absolute; 
    z-index: 2; 
    right: 100%; 
    overflow: hidden; 
    display: block; 
    width: 100%; 
}

DEMO

источник

2014-10-30 17:14:22 kei

, и вы используете весь код, например: http: // jsfiddle.net/05gu7bpr/6/ –

Штукатурка. Таким образом, это была ошибка, больше практики в проверке необходимости ... причудливый перевод прямо в два раза * стон *. – tymothytym

http://jsfiddle.net/desmo/05gu7bpr/5/

шоу произойдет после анимации на первый щелчок

Я исправил CSS и JS

CSS:

#mover { 
    background:rgba(47, 47, 47, 1); 
    min-height: 100%; 
    position: absolute; 
    z-index: 2; 
    right: 100%; 
    overflow: hidden; 
    width: 100%; 
} 
#mover a { 
    width: 100px; 
    height: 60px; 
    color: #fff; 
    text-decoration: none; 
    display: block; 
    padding-top: 10px; 
} 
#mover .menu_close { 
    width: 100px; 
    height: 60px; 
    background: #FF7466; 
    color: #fff; 
    text-align: center; 
}

JS:

//menu open 
jQuery('#openMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover') 
     .animate({ 
     right: '0%' 
    }, 500); 
}); 
//menu close 
jQuery('#closeMenu').click(function (event) { 
    event.preventDefault(); 
    jQuery('#mover').animate({ 
     right: '100%' 
    }, 500); 
});

источник

2014-10-30 17:16:20 jean

jQuery animate() работает только во втором щелчке

ответ

Смежные вопросы