2014-02-04 21 views
1

Я пытаюсь сделать простую анимацию с 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'}); 

}); 

Пожалуйста, помогите :)

+0

Не могли бы вы создать http://jsfiddle.net с кодом js и html, который повторяет проблему? – SoAwesomeMan

+0

Это проблема css, jQuery имеет проблемы с анимацией определенных элементов с определенными стилями, поскольку она не может реально получить высоту элемента, поэтому анимация никогда не имеет никакого эффекта, работает только последняя часть, где скрыт элемент. Ваш код, кажется, работает в примере -> http://jsfiddle.net/P8Quj/1/, поэтому вам придется попытаться воспроизвести стили и выпустить скрипку? – adeneo

+0

Я могу воспроизвести ошибку! Это тот же код + некоторый CSS: http://jsfiddle.net/P8Quj/2/ Действительно, высота, определенная в моем CSS, вызывает проблемы. Но я не понимаю, почему, потому что '.quickReply' имеет определенную высоту ... – Flobesst

ответ

1

Эта проблема возникает из-за имущества min-height. Это было проблемой для animate и slide эффектов с jQuery 1.4.

Если вы удалите что min-height на section вы будете видеть это работает хорошо: http://jsfiddle.net/P8Quj/5/

Вот источники, которые вы должны прочитать об ошибке:

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