jQuery animate() to hide and show elements by sliding left and right

Question

I\'m trying to animate something using jQuery.

UPDATE

I have it working the way I want it. This is the jQuery:

    $(document).ready(function(         


        

Answer 1

Try changing

$('#search').animate({ 
                    width: '0px',
                }, 
                    '1000'
                );

to

$('#search').animate({ width: '0px' }, 1000, function() {
                $(this).hide();
             });

Once the animation is complete, the element will be hidden.

I also noticed that the 'Search' text isn't animated well. Before doing the animate, try removing (or fading out) the text. Remember to show it again when toggling back. Eg:

$('#search-label').hide();

OR

$('#search-label').fadeOut();