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
Vous devez vous connecter pour publier un commentaire.
Essayez de changer
à
Une fois l'animation terminée, l'élément sera caché.
J'ai aussi remarqué que la "Recherche" du texte n'est pas animé.
Avant de faire l'animer, essayez de supprimer (ou de fermeture) le texte. N'oubliez pas de le montrer à nouveau lors du basculement en arrière. Par exemple:
OU
Avez-vous ce travail? Il semble bien ici sur IE et Firefox
Oui je l'ai eu à travailler. Je vais poster ma solution après j'ai corrigé quelques petits détails visuels.
OriginalL'auteur g t
J'ai tout compris. Pour le faire glisser vers la gauche, j'ai donné l'entourage correspondant
<div>
s une largeur etmargin-left: 0px;
. Ensuite, j'ai eu le problème de l'habillage du texte comme la largeur rétrécie/élargi. Pour corriger cela, j'ai ajoutéwhite-space: nowrap;
à la CSS pour le correspondant<div>
s.Voici le jQuery:
... et le CSS:
Si quelqu'un a des suggestions sur la façon dont j'ai formaté le jQuery, s'il vous plaît laissez-moi savoir ce que vous en pensez... vous aimez la façon dont j'ai formaté? Je me sens comme il semble un peu maladroit.
OriginalL'auteur Hristo
La page type de capote sur le bouton...l'esprit de votre sélecteurs.
Probablement que vous souhaitez animer la position ou de la marge simultanément à la largeur:0 animation. .animate({width: '0',:'150px'}); quelque Chose comme ça.
OriginalL'auteur Squirkle