jQuery animate() pour masquer et afficher des éléments en faisant glisser à gauche et à droite

Je suis en train d'animer à l'aide de jQuery.

Mise à JOUR

Je avoir de travail la façon dont je le veux. C'est le 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();
                        }
                    );
                }
            );
        });
    });

Le problème maintenant est que le texte est habillage comme la diapositive qui se passe et c'est très laid. Comment pourrais-je faire en sorte que les diapositives de texte/de la barre de recherche et les champs de saisie sans emballage comme la largeur se rétrécit/élargit?

Grâce.

VIEILLE QUESTION

En gros, j'ai envie de faire glisser dans la barre de recherche à gauche, essentiellement de la cacher, et puis de faire glisser le 4 entrées ci-dessous. Pour l'instant, je les ai placés sous la barre de recherche mais mon plan est de les cacher, et quand le Chat" est enfoncé, la recherche glisse vers la gauche et les 4 entrées glisser vers la droite.

Droit maintenant, la recherche de la boîte de diapositives dans le centre et ne disparaît pas complètement. Comment puis-je faire de sorte qu'il fonctionne comme je le veux? Si mon explication n'est pas claire quant à ce que je cherche, merci de demander des éclaircissements.

Grâce.

OriginalL'auteur Hristo | 2010-07-19