12
votes

JQuery Animate () Pour cacher et montrer des éléments en glissant à gauche et à droite

J'essaie d'animer quelque chose en utilisant jQuery.

MISE À JOUR

Je l'ai travaillé comme je le veux. Ceci est la jQuery: xxx

Le problème est maintenant que le texte est enroulant lorsque la diapositive se produit et c'est très laid. Comment pourrais-je le faire pour que le texte glisse dans / sorti comme la barre de recherche et les champs de saisie sans qu'il enveloppe la largeur rétrécit / se développe?

Merci.

Ancienne question < / H2>

Fondamentalement, je veux glisser dans la barre de recherche vers la gauche, ce qui la cache essentiellement, puis faites glisser les 4 entrées ci-dessous. Pour l'instant, je les ai placés sous la barre de recherche, mais mon plan est de les masquer, et lorsque le bouton "Go Chat" est enfoncé, la recherche se glisse sur la gauche et les 4 entrées glissent dans la droite.

En ce moment, la boîte de recherche glisse au centre et ne disparaît pas complètement. Comment puis-je le faire afin que cela fonctionne comme je le veux? Si mon explication n'est pas claire quant à ce que je cherche, veuillez demander des éclaircissements.

Merci.


0 commentaires

3 Réponses :


0
votes
$('#search').animate({width: '0'}, 1000, function(){
    $(this).hide();
});
The page kind of freaks out on toggle...mind your selectors.

2 commentaires

Merci. Maintenant, comment alliez-vous gérer l'effet de la diapositive ... Je veux qu'il glisse à gauche, pas le centre tel qu'il fait actuellement?


Vous voulez probablement animer simultanément la position ou la marge à la largeur: 0 animation. .animate ({largeur: '0', gauche: '150px'}); Quelque chose comme ca.



16
votes

Essayez de changer xxx

à xxx

une fois que l'animation est terminée, l'élément sera masqué.

J'ai également remarqué que le texte de la recherche n'est pas bien animé. Avant de faire l'animation, essayez de supprimer (ou de sortir) le texte. N'oubliez pas de le montrer à nouveau lorsque vous basculez. Par exemple: xxx

ou xxx


2 commentaires

Merci. Maintenant, comment alliez-vous gérer l'effet de la diapositive ... Je veux qu'il glisse à gauche, pas le centre tel qu'il fait actuellement?


Oui je l'ai travaillé. Je posterai ma solution après avoir répercuté quelques détails visuels mineurs.



6
votes

Je l'ai compris. Pour le faire glisser vers la gauche, j'ai donné le

S une largeur et margin-gauche: 0px; . Ensuite, j'ai eu la question de l'emballage de texte comme la largeur réduite / élargie. Pour résoudre ce problème, j'ai ajouté blanc-espace: Nowrap; au CSS pour le
s.

voici la jQuery: xxx

... et le CSS: xxx

si quelqu'un a des suggestions sur le Comment j'ai formaté la jQuery, s'il vous plaît laissez-moi savoir ce que vous pensez ... aimez-vous la façon dont j'ai formaté? Je me sens comme si ça a l'air un peu maladroit.


0 commentaires