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.

Pietism

Answer 1

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.

Pietism

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

Stickler

Thanks. Now, how would I handle the slide effect... I want it to slide to the left, not the center as it is doing currently? – Pietism

Yes I got it working. I'll post my solution after I fix some minor visual details. – Pietism

Answer 3

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

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

Toandfro

Thanks. Now, how would I handle the slide effect... I want it to slide to the left, not the center as it is doing currently? – Pietism

Probably you want to animate the position or margin simultaneously to the width:0 animation. .animate({width: '0', left:'150px'}); Something like that. – Toandfro