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

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

The page kind of freaks out on toggle...mind your selectors.

Answer 2

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

Answer 3

I figured it out. To make it slide to the left, I gave the corresponding surrounding <div>s a width and margin-left: 0px;. Then I had the issue of the text wrapping as the width narrowed/widened. To fix that, I added white-space: nowrap; to the CSS for the corresponding <div>s.

Here's the jQuery:

$(document).ready(function() {
    $('#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();
                    }
                );
            }
        );
    });
});

... and the CSS:

#search {
    border: 1px solid #999999;
    -moz-border-radius: 5px;
    width: 573px;
    height: 40px;
    margin: auto;
    margin-top: 100px;
    margin-left: 0px;
    position: relative;
}

#go-chat {
    width: 575px;
    margin: auto;
    margin-top: 36px;
    margin-left: 0px;
    padding-top: 5px;
    white-space: nowrap;
}

#login {
    border: 0px;
    width: 0px;
    display: none;
    margin: auto;
    margin-top: 100px;
    margin-left: 0px;
    position: relative;
}

#go-search {
    width: 0px;
    margin: auto;
    margin-top: 36px;
    margin-left: 0px;
    padding-top: 5px;
    white-space: nowrap;
    display: none;
}

If anyone has suggestions on the way I formatted the jQuery, please let me know what you think... do you like the way I formatted? I feel like it looks a bit awkward.