1

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 :)

Flobesst
  • 1,281
  • 1
  • 16
  • 26
  • Could you create a http://jsfiddle.net with your js and html code that repros the issue? – SoAwesomeMan Feb 04 '14 at 21:55
  • It's a css issue, jQuery has issues with animating certain elements with certain styles as it can't really get the height of the element, so the animation never really has any effect, only the last part where the element is hidden works. Your code seems to work in an example -> http://jsfiddle.net/P8Quj/1/, so you'll have to try to replicate the styles and issue in a fiddle ? – adeneo Feb 04 '14 at 21:56
  • I can reproduce the bug ! This is the same code + some CSS: http://jsfiddle.net/P8Quj/2/ Indeed, height defined in my CSS is causing troubles. But I don't understand why because `.quickReply` has a specific height... – Flobesst Feb 04 '14 at 23:00

1 Answers1

1

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:

Mark S
  • 3,789
  • 3
  • 19
  • 33