web-dev-qa-db-fra.com

jQuery animate () pour masquer et afficher des éléments en glissant vers la gauche ou la droite

J'essaie d'animer quelque chose avec jQuery. 

METTRE À JOUR

Je l'ai fonctionne comme 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, c’est que le texte s’emballe lorsque la diapositive se produit et qu’il est très moche. Comment pourrais-je faire en sorte que le texte glisse vers l'intérieur/extérieur sous forme de barre de recherche et les champs de saisie sans qu'il soit enveloppé par une largeur réduite/agrandie?

Merci.

VIEILLE QUESTION

En gros, je veux glisser dans la barre de recherche vers la gauche, en le cachant essentiellement, puis en faisant glisser les 4 entrées en dessous. Pour le moment, je les ai placées sous la barre de recherche, mais mon objectif est de les masquer. Lorsque vous appuyez sur le bouton "Discuter en ligne", la recherche glisse vers la gauche et les 4 entrées vers la droite.

Pour le moment, la zone de recherche glisse vers le centre et ne disparaît pas complètement. Comment puis-je le faire pour qu'il fonctionne comme je le veux? Si mon explication n'est pas claire quant à ce que je recherche, veuillez demander des éclaircissements.

Merci.

javascriptjqueryjquery-animateslide
12
Hristo

Je l'ai compris. Pour le faire glisser à gauche, j’ai donné à <div>s correspondant une largeur et à margin-left: 0px;. Ensuite, j'ai eu la question de l'habillage du texte à mesure que la largeur diminuait/s'élargissait. Pour résoudre ce problème, j'ai ajouté white-space: nowrap; au CSS pour le <div>s correspondant. 

Voici le 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();
                    }
                );
            }
        );
    });
});

... et le 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;
}

Si quelqu'un a des suggestions sur la façon dont j'ai formaté jQuery, merci de me dire ce que vous pensez ... aimez-vous la façon dont j'ai formaté? J'ai l'impression que cela semble un peu gênant.

6
Hristo

Essayez de changer

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

à

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

Une fois l'animation terminée, l'élément sera masqué.

J'ai aussi remarqué que le texte "Rechercher" n'était pas bien animé. Avant de faire l'animation, essayez de supprimer (ou d'effacer en fondu) le texte. N'oubliez pas de le montrer à nouveau lorsque vous revenez en arrière. Par exemple:

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

OR

$('#search-label').fadeOut();
15
g t
$('#search').animate({width: '0'}, 1000, function(){
    $(this).hide();
});

Le genre de page se moque de la bascule ... faites attention à vos sélecteurs.

0
Squirkle