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() {

        // go chat button
        $('#go-chat input').click(function() {
            $('#search, #go-chat').animate({width: '0px'}, 1000, function() {
                    $(this).hide();
                    $('#login, #go-search').animate({width: '573px'}, 1000, function() {
                            $(this).show();
                        }
                    );
                }
            );
        });
        $('#go-search input').click(function() {
            $('#login, #go-search').animate({width: '0px'}, 1000, function() {
                    $(this).hide();
                    $('#search, #go-chat').animate({width: '573px'}, 1000, function() {
                            $(this).show();
                        }
                    );
                }
            );
        });
    });

The problem now is that the text is wrapping as the slide happens and it is very ugly. How could I make it so that the text slides in/out as the search bar and the input fields without it wrapping as the width narrows/expands?

Thanks.

OLD QUESTION

Basically, I want to slide in the search bar to the left, essentially hiding it, and then slide out the 4 inputs below it. For now, I've placed them under the search bar but my plan is to hide them, and when the "Go Chat" button is pressed, the search slides out to the left and the 4 inputs slide in to the right.

Right now, the search box slides in to the center and doesn't disappear fully. How can I make it so it functions as I want it? If my explanation is unclear as to what I'm looking for, please ask for clarification.

Thanks.

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();