slideDown doesn't “hide” the element

Question

The animation I wanted to show/hide the order form works perfectly except one issue, the form does not hide on sliding down, a part of it is still visible.

HTML:

<div class="post">
    <div class="post-content">
        <a href="" class="order"></a>
        ...
    </div>
    <div class="order-form">
        <a href="" class="close"></a>
        ...
    </div>
</div>

jQuery:

$(".post .order").click(function () {
          $(this).fadeOut();
          $(this).parents('.post-content').slideUp();
          $(this).parents('.post-content').next('.order-form').show();
          $(this).parents().find('.close').fadeIn();
          return false;
    });
    $(".order-form .close").click(function () {
        $(this).fadeOut();
        $(this).parents('.order-form').slideDown();
        $(this).parents('.order-form').prev('.post-content').slideDown(function(){
            $(this).parents('.order-form').prev('.post-content').css('display', 'none');
        });
        $(this).parents().find('.order').fadeIn();
        return false;
    });

.. as you can see I tried .hide() but that doesn't work as expected, it disabled the slidedown animation which is required for a neat drawer (right word?) like effect.

Thanks!

Answer 1

I Try something like this http://jsfiddle.net/2yrj6/2/
but I don't know if that's what you want

Answer 2

I see that you're calling $(this).parents('.order-form').prev('.post-content').css('display', 'none'); inside a callback function. Except, $(this) is no longer the close button. It is the element which was just hidden. Try declaring var $this in the first line of your click callback. Then use $this instead of $(this).

Other notes: You should do parents('.post') instead of parents() for better performance. You can use .hide() instead of .css('display', 'none').