J'ai vu un menu CSS3 qui a une très belle transition: Je veux appliquer la même transition vers ma table. J'ai une table qui sur la table de la table Cliquez, une nouvelle ligne est annexée après avoir cliqué sur la ligne et elle est affichée ou masquée. Comme dans le code ci-dessous (cliquez sur la valeur du sélecteur JQuery pour une ligne cliquée): au lieu de Mise à jour de la question: Peut-être que je devrais Rephrase < / fort>.
Quelle est la meilleure façon de glisser lentement certains contenus nouvellement créés? Il semble que: ressemble à: < PRE> XXX SANS EFFET SDITORNOWN, qu'est-ce que je manque ici? SDITED Comment Puis-je appliquer la transition ci-dessus CSS vers une ligne de table nouvellement ajoutée ou y at-il équivalent JavaScript?
5 Réponses :
Ajoutez des CSS à la feuille de style comme puis
Merci pour votre réponse. Comment est-ce différent de la réponse ci-dessous?
@ankur: Il y a une réponse (presque) identique si vous avez suffisamment de réputation. C'est juste qu'il a été supprimé une demi-heure après FusionPro Soumis leur réponse.
Si je comprends la question de la question, vous ajoutez de manière dynamique du contenu à votre table (via AJAX?) Et au lieu de simplement apparaître au bas de la table, vous voulez qu'il glisse?
Qu'est-ce que vous Il manque est le [EDIT] Les rangées de table présentent des obstacles particuliers à l'animation, puisque les navigateurs
Utilisez différentes valeurs (rangée de table et bloc) pour leur affichage visible
propriété. Les méthodes .Hide () et .show (), sans animation, sont
Toujours en sécurité à utiliser avec des rangées de table. Comme de jQuery version 1.1.3,
.Fadein () et .FADEOUT () Peut être utilisé aussi bien.
Pour corriger, vous devez envelopper votre contenu dans un DIV et montrer cela. J'ai créé un jsfiddle: http://jsfiddle.net/vxe6r/ << / p> masquer () : .slitown (vitesse) est une alternative à . Afficher (vitesse) , mais pour le fonctionnement de l'élément doit être masqué, à l'aide de CSS ( Affichage: Aucune ) ou par .hide (vitesse) IT.
Ainsi, la solution ci-dessus ferait ceci en utilisant JQuery Animate Library. Cela peut également être fait en utilisant CSS3.
Je n'ai pas modifié le code de tout comportement de fantaisie, j'espère que l'idée est claire: p>
HTML: P>
$('table').on('click', function(){
$tbody = $(this).find('tbody:last');
$tbody.after('<tr><td><div>new</div></td></tr>');
});
.inner {
height : 50px;
-moz-transition: all 0.3s ease 0.1s;
-webkit-transition: all 0.3s ease 0.1s;
transition: all 0.3s ease 0.1s;
background : #ded;
border : 1px solid #999;
}
.inner.start-animation {
height : 0px;
}​
"Quel est le meilleur moyen de glisser lentement quelques-uns nouvellement créés Contenu? "
Mettez le contenu dans un conteneur qui le cache initialement. Ensuite,
SDITEDOWN Le parent pour révéler l'enfant nouvellement ajouté.Cela va être extrêmement dur avec une rangée de table (
) car une table n'est pas le même type d'élément de niveau de bloc que le , etc. - c'est une bête unique, et tous les navigateurs ne l'apprivoient pas de la même manière. (Expliqué assez bien dans Cette question à la question )
Donc - si c'était moi - je ferais ma table et mes cellules strictement sémantiques et enveloppez la table dans quelque chose qui pourrait cacher les rangées (si j'étais obligé d'utiliser une table):
http://jsfiddle.net/25uqr/ (oui, j'ai passé trop de temps dessus )
Pour ce que vous avez décrit dans votre message, j'aurais utilisé un
,
ou
. Leurs enfants agissent beaucoup comme une rangée de table, mais sont des éléments de niveau des blocs ... une manipulation est donc assez simple et un coffre-fort cross-navigateur (ish) er.
0 commentaires
API.JQUERY.com/animate Lisez ceci.
Merci je suis déjà allé au four et j'ai essayé des trucs de choses c'est pourquoi j'ai fini ici que je dois faire quelque chose de mal évidemment
Je suis vraiment tombé dans ce que tu veux peut-être commencer une prime à ce sujet.
Aucune animation sur les éléments de table Bébé ...: S
Je devrais indiquer l'évidence, juste au cas où. 0.3s traduit à 300 millisecondes.