Croix-navigateur jQuery animation de transition?
Y a jQuery 1.3 animation-transitions qui fonctionnent dans les deux Firefox 3 et IE7?
J'ai un tableau avec plusieurs lignes de la table (25 ou plus), avec quelques lignes de départ cachés (ces lignes tous partagent une même classe; dans cet exemple, c'est ".caché"). Dans la table en-tête est un "plus" lien qui est lié via .cliquez sur() pour une fonction qui va afficher les lignes masquées, et puis changer le "plus" de "moins" et de changer la .cliquez sur() pour une fonction qui fait le contraire.
Dans chaque .cliquez sur la (les) fonction, il y a une ligne comme
$(this).parents("tbody").children("tr.hidden").show();avec .show() remplacé par .hide() pour le "moins" de la fonction.
Cependant, si j'essaie de remplacer la .show()/.hide() avec .fadeIn()/.fadeOut(), c'est à dire le rend comme presque identique .show()/.hide (), sauf qu'il prend une minute pour .masquer() pour prendre effet. Pas de véritable animation. Inférieure dans IE, mais il fonctionne très bien avec Firefox.
Si j'essaie de l'utiliser .slideDown()/.slideUp(), il en est de même janky dans IE, presque identique à .show()/.hide (), sauf avec un drôle d'effet pulsant juste après la fin de la transition. Firefox 3 chokes sur elle aussi bien, apparemment juste oublier la largeur de l'emprise des lignes de la table montré et l'ensemble de la chose look terrible.
Donc faire des animations tout le sucer dans IE7? Est-il possible d'avoir un gracieux et transition en douceur dans ce cas, qui va travailler dans les deux navigateurs?
Vous devez vous connecter pour publier un commentaire.
Selon jQuery est la page de compatibilité ce genre de chose est un bug et doit être signalé.
Souvent multiples, simultanées des animations peut être difficile pour IE. Le moteur Javascript n'est tout simplement pas n'importe où près de Safari ou Firefox ou Chrome. Il en va ainsi pour IE6 et IE7. Je n'ai pas travaillé avec IE8 encore.
Une chose qui peut aider un peu, c'est d'avoir statique hauteurs ensemble sur les éléments que vous essayez de les animer. À partir d'un CSS/layout point de vue, ce n'est généralement pas l'idéal, mais... cela permet de jQuery pour ignorer la tâche d'avoir à calculer la hauteur de chaque élément avant de elle anime l'élément de la hauteur.
En général, vous pourriez approche des animations de la même manière que vous le feriez pour un appareil photo REFLEX. (Rester avec moi ici). Si vous essayez de prendre des clichés rapides d'un événement sportif, tout photographe recommandons la mise en place de l'accent, de la sensibilité ISO et la vitesse d'obturation à l'avance. De cette façon, l'appareil photo n'a pas à calculer tout ça entre chaque tir, et vous pouvez juste maintenez le déclencheur enfoncé et cliquez-cliquez-cliquez-cliquez sur. Une Équipe de style.
De toute façon, quand il s'agit de animations, essayez de penser à des choses le javascript doit calculer pour l'animation d'arriver. L'opacité, la hauteur, calculée à hauteur de (élément de largeur + bordure + remplissage), la position de l'écran, sont tous de bons endroits pour commencer.
Souvent, vous pouvez réellement voir ce que jQuery est l'ajout dans les DOM que des animations de démarrage (à l'aide de Firebug). Comme, sur l'opacité de l'animation, vous pouvez voir le style="opacity:1;" être ajouté juste avant le compte à rebours jusqu'à 0 commence.
Je ne voudrais pas être trop explicite lorsque l'on parle de performances dans les navigateurs. Franchement, j'ai vu des lourds JS animations qui feront de webkit pleurer, alors que FF et IE gérer assez bien.
Vous aurez juste à considérer que les navigateurs ont différents CSS et JS implémentations que parfois, il est difficile de pointer du doigt le coupable derrière votre lent performances.
Prendre IE. Si vous avez un bloc de niveau élément 4000x4000 et une 2x2 gif transparent réglée pour se répéter, à chaque fois que vous souhaitez, à dieu ne plaise, déplacez l'élément IE va redessiner la 2x2 gif et calculer l'alpha pour chacun, 2000 fois plus. FF soit caches arrière-plan ou a un tout autre rafraîchissement, dans les deux cas, les performances sont incomparables. Il ne l'a pas dit dans le manuel, vous avez juste à être prudent sur la manière et de ce que vous faites.