Easing animation snaps abruptly

Question

I'm working on a link click to expand a hidden div layer below the link. I'm using 'easeOutBounce' and it looks great. The problem is when I click the link to easeout the div back to hidden state. As it's doing it's animation there is a white area (where the div was) and the divs below snap back abruptly. I would like to ease in the div it pushed. I hope that makes sense.

$(".launch-search").click(function () {
    $('.search-container').toggle('slide', {
        duration: 1000,
        easing: 'easeOutBounce',
        direction: 'up'
    });
});

Here is a JSFiddle of the example problem. Notice the big white gap below the search container, and the hard snap to the top with the blue box.

http://jsfiddle.net/0wj2g3jm/6/

Answer 1

Instead of using slide, you can use animate like below:

$(".launch-search").click(function () {
    $('.search-container').animate(
     { height: "toggle" }, {
     duration: 'slow',
     easing: 'easeOutBounce'
    });
});

Check out the fiddle. Hope it helps..