Transition en douceur entre les deux (la classe) et (classe):hover
Est-il un script ou d'une manière, qui fait normale CSS :hover
plus lisse?
Idée serait, que vous avez deux classes peut-être avec un gradient horizons, et le script en douceur swap les classes. Si les gradients ressemblerait votre en appuyant sur un bouton. Devrait être automatique, de sorte que vous appelez le déclencheur: $('.someclass').SmoothTransition();
et il utilisera automatiquement le .someclass:hover
que la deuxième classe.
Bounty modifier
C'est effectivement une question très intéressante qui a obtenu une réponse partielle par moi. Le problème avec ma réponse est qu'il ne fonctionne que pour la solidité de la couleur d'arrière-plan et ne fonctionne pas avec des gradients CSS ou tout autre plus de paramètres spécifiques.
Ce script doit être un "must-have" dans toute jQuery développeurs de la bibliothèque. Donc, je vous propose 150 rep à n'importe qui, qui peut penser d'une manière ou trouver de bonnes ressources, qui peuvent le faire.
Si votre méthode (simple plugin jQuery) fonctionne pour tous ces exemples, alors vous avez gagné!
Exemples: http://jsfiddle.net/4pYWD/
Les temps modernes de modifier
Depuis que cette question a été posée en 2011, lors de la transition CSS, est jeux commerciaux n'était pas une option. Puis comprendre, pourquoi tout est centré sur JS et pas CSS, dans cette question. À partir de ces réponses, j'ai développé un script JS, qui était à l'époque, parfait. Ses pas plus, les transitions CSS sont la solution ultime maintenant, de sorte que la réponse adéquate ai re-accepté.
OriginalL'auteur Kalle H. Väravas | 2011-07-23
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser transitions css3 pour y parvenir.
Un exemple:
Vous pouvez consulter cette vivante ici.
L'exemple a été donné avec des couleurs statiques, mais vous pouvez utiliser dégradés css3 ainsi:
Oups j'ai oublié de le mentionner. Eh bien, si ce n'est pas un must-have exigence de votre projet, vous pouvez laisser les utilisateurs des navigateurs plus anciens, sans les transitions en douceur, car il n'affecte pas l'accessibilité. Dans certains projets, en fait, n'est pas la peine de maintenir du code JS pour que.
Techniquement, c'est une zone d'administration, mais il y a souvent un grand besoin de ce genre de méthode, pour toutes sortes de projets.
Non, navigateurs ne supportent pas les transitions, cependant, vous pouvez utiliser Modernizr pour tester, et de fournir un jQuery de secours dans le cas où il ne l'est pas.
Vous devriez avoir un
transition:
ligne sinusoïdale qui finira par être le spec, je l'espère.OriginalL'auteur bluefoot
http://jsfiddle.net/btleffler/MZ6T8/
Fonctionne dans Chrome, Safari pour Windows, et de l'Opéra. IE et Firefox ont de pacotille soutien pour CSSRules objets, de sorte que les résultats sont douteux, au mieux. Je vais continuer à travailler sur elle pour voir si je peux corriger les problèmes.
Les styles css ont besoin d'être modifié. Car il n'y a pas de couleur d'arrière-plan assigné à la
:hover
sélecteur sur le dernier exemple, il n'y a pas de couleur d'arrière-plan sur le nouvel élément.Si quelqu'un a quelques idées pour ce genre de choses, je serais ravi de les entendre.
EDIT: FIXE
http://jsfiddle.net/btleffler/JfPBS/
Celui-ci fonctionne mieux. Je recherche par le biais de toutes les règles css pour
:hover
sélecteurs, puis-je sauvegarder le CSS du texte associé à cette règle, et non :passez à la règle comme un objet javascript qui peut être branché sur$().css()
. Après, j'ai calculer le réel "passez le curseur de la classe" en utilisant$.extend()
d'étendre le hover de la classe à la classe normale. De cette façon, si il n'y a pas d'arrière-plan définie dans le:hover
classe, il y aura toujours le fond de la classe normale.Enfin, j'ai créer un élément, et le placer directement sous l'élément d'origine, se débarrasser de ce qui fait de CSS gérer le hover, ajouter mon style normal à l'original, et mon calculée passez de style à l'élément nouveau, en vertu de l'.
Tout ce que nous devons faire après, c'est-à animer l'opacité sur les événements de souris. Simple!
Il fixe. Fonctionne dans Chrome, Firefox, Opera et IE!
Mec, sympa! Je me souviens de peu en arrière, quand j'ai créé quelques hardcore plugins pour 50 primes:D je pense que le karma a payé. Je suis fondamentalement ne va pas analyser, sur le premier coup d'oeil, il répond à toutes mes exigences présentées et je vois la quantité de travail sur le plugin. Vous n'aurez directement! L'IDENTIFIANT et le CSSRule problème est mineur et peut être contourné. Mille mercis! 🙂
Vous êtes les bienvenus! C'était une expérience d'apprentissage pour moi. Question très intéressante. Je souhaite qu'il y ait plus de gens de déconner avec l'idée.
Eh bien, si vous êtes d'accord, alors les gens peuvent le modifier et de l'améliorer. Tôt ou tard, cela va être repris par jQuery personnes et nous espérons qu'il sera inclus dans la base jQuery. Car, je pense que la plupart de ceux qui ont vu cette question, d'accord.. que de telles plugin n'ont un grand besoin.
OriginalL'auteur btleffler
http://desandro.github.com/motion-emotion/ Ce projet permet à des transformations dans tous les principaux navigateurs, sauf ie7 et ie6. Il a amélioration progressive de ces 2 navigateurs
OriginalL'auteur Keith.Abramo
Donc la solution que je cherchais est-ce:
Voir la démo live: http://jsfiddle.net/hobobne/uRJWG/
REMARQUE: Ne fonctionne pas avec les dégradés css3. Mais encore..
Oui, mon mauvais. Correction du lien.
vous allez probablement vouloir accepter votre propre question, puisque c'était la manière de le résoudre. Consultez le faq
OriginalL'auteur Kalle H. Väravas
C'est vraiment rude, mais j'ai un violon qui devrait être (en théorie) fonctionne sur tous les navigateurs et avec ce que l'image que vous voulez. Pour l'instant il est un peu hacky (lire extrêmement), mais c'est un bon endroit pour commencer, et peut-être amener les gens sur la voie d'une réponse complète. Aussi, il ne fonctionne pas pour le moment si vous le faites rapidement. Le bouton doit afficher ou complètement avant de la souris sort de l'élément. Comme je l'ai dit, hacky mais c'est un début.
OriginalL'auteur Ktash
J'ai enfin trouvé le plus ULTIME façon d'avoir une transition en douceur sur le vol stationnaire. J'espère que cela aidera d'autres avec le même problème. Au courant de mes tests montrent que cela fonctionne à 100% pour tous les exemples que je pouvais venir. Fonctionne pour les liens hypertexte et les conteneurs normaux.
Télécharger à partir de GitHub
Ce plugin dispose de 3 options.
Si vous avez des idées sur comment optimiser ce plugin, alors contactez-moi ou laissez un commentaire 🙂
OriginalL'auteur Kalle H. Väravas