No jQuery slideUp() animation on particular block

StackOverflow https://stackoverflow.com/questions/21564245

  •  07-10-2022
  •  | 
  •  

Question

I'm trying to do a simple animation with jQuery and jQuery Easing plugin. Animations are working well except if they are applied on section.quickReply

Here is my 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>

If I apply this jQuery code, I see the right animation (slide up with easeInOutBounce):

$('section.quickReply form').submit(function(e) {

    e.preventDefault();

    $('section.quickReply form').slideUp({ duration: 5000, easing: 'easeInOutBounce'});

});

But with that code, I can't see the animation and after 5 seconds my block disappears suddenly:

$('section.quickReply form').submit(function(e) {

    e.preventDefault();

    $('section.quickReply').slideUp({ duration: 5000, easing: 'easeInOutBounce'});

});

Please help :)

Was it helpful?

Solution

This issue is due to the min-height property. This has been a problem for animate and slide effects since jQuery 1.4.

If you'll remove that min-height on section you'll see it working well: http://jsfiddle.net/P8Quj/5/

Here are the sources that you should read about the bug:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top