Я пытаюсь сделать простую анимацию с jQuery и jQuery Easing плагином. Анимации хорошо работает, за исключением, если они применяются на section.quickReply
Нет анимации jQuery slideUp() на конкретном блоке
Вот мой HTML:
<section class="post quickReply">
<form method="POST">
<header>Poster une réponse</header>
<aside>
<!-- Some image here -->
<p><!-- Some link here --></p>
</aside>
<p class="content">
<textarea></textarea>
<input type="submit" value="Poster" />
</p>
</form>
</section>
Если я применяю этот JQuery код, я вижу правильную анимацию (слайд с easeInOutBounce):
$('section.quickReply form').submit(function(e) {
e.preventDefault();
$('section.quickReply form').slideUp({ duration: 5000, easing: 'easeInOutBounce'});
});
Но с этим кодом, я не могу увидеть анимацию и через 5 секунд мой блок исчезает внезапно:
$('section.quickReply form').submit(function(e) {
e.preventDefault();
$('section.quickReply').slideUp({ duration: 5000, easing: 'easeInOutBounce'});
});
Пожалуйста, помогите :)
Не могли бы вы создать http://jsfiddle.net с кодом js и html, который повторяет проблему? – SoAwesomeMan
Это проблема css, jQuery имеет проблемы с анимацией определенных элементов с определенными стилями, поскольку она не может реально получить высоту элемента, поэтому анимация никогда не имеет никакого эффекта, работает только последняя часть, где скрыт элемент. Ваш код, кажется, работает в примере -> http://jsfiddle.net/P8Quj/1/, поэтому вам придется попытаться воспроизвести стили и выпустить скрипку? – adeneo
Я могу воспроизвести ошибку! Это тот же код + некоторый CSS: http://jsfiddle.net/P8Quj/2/ Действительно, высота, определенная в моем CSS, вызывает проблемы. Но я не понимаю, почему, потому что '.quickReply' имеет определенную высоту ... – Flobesst