Animation de transition jQuery inter-navigateur?

Question

Existe-t-il des transitions d'animation jQuery 1.3 fonctionnant à la fois dans Firefox 3 et IE7?

J'ai une table avec plusieurs lignes (25 ou plus), certaines lignes commençant par masquées (ces lignes partagent une classe commune; dans cet exemple, il s'agit de ".hidden"). L'en-tête de la table contient un " Afficher plus " lien qui est lié via .click () à une fonction qui affichera les lignes cachées, puis changera le " Afficher plus " Afficher " Afficher moins " et remplacez le .click () par une fonction qui fait le contraire.

Dans chaque fonction .click (), il y a une ligne comme

$(this).parents("tbody").children("tr.hidden").show();

avec .show () remplacé par .hide () pour l'option "Afficher moins". une fonction.

Cependant, si j'essaie de remplacer le .show () /. hide () par .fadeIn () /. fadeOut (), IE le rend presque identique à .show () /. hide () sauf que cela prend Une minute pour que .hide () prenne effet. Aucune vraie animation là-bas. Inférieur dans IE, bien que cela fonctionne très bien Firefox.

Si j’essaie d’utiliser .slideDown () /. slideUp (), c’est pareil pour janky dans IE, il est presque identique à .show () /. hide () sauf avec un effet de pulsation bizarre juste après la transition. Firefox 3 s’étouffe également, apparemment, en oubliant simplement la largeur des rangées du tableau et en rendant le tout horrible.

Alors, les animations aspirent-elles IE7? Existe-t-il un moyen d’effectuer dans ce cas une transition harmonieuse et fluide qui fonctionnera dans les deux navigateurs?

Answer 1

Selon la page de compatibilité de jQuery , ce type de problème est un bogue et doit être signalé.

Answer 2

Souvent, avoir plusieurs animations simultanées peut être difficile pour IE. Le moteur Javascript n’est pas proche de Safari, Firefox ou Chrome. Cela vaut pour IE6 et IE7. Je n'ai pas encore travaillé avec IE8.

Une chose qui peut aider un peu, est d’avoir des hauteurs statiques définies sur les éléments que vous essayez d’animer. D'un point de vue CSS / layout, ce n'est généralement pas idéal, mais ... cela permet à jQuery de ne pas avoir à calculer d'abord la hauteur de chaque élément avant de l'animer.

En général, vous pouvez aborder les animations de la même manière qu’un appareil photo reflex. (Restez avec moi ici). Si vous essayez de photographier rapidement un événement sportif, tout photographe vous recommande de définir à l'avance la mise au point, la sensibilité ISO et la vitesse d'obturation. De cette façon, l'appareil photo n'a pas à calculer tout cela entre chaque prise de vue et vous pouvez simplement maintenir le déclencheur enfoncé et cliquer, cliquer, cliquer, cliquer. Style A-Team.

Quoi qu’il en soit, quand il s’agit d’animations, essayez de penser aux choses que le javascript doit calculer pour que l’animation se produise. L’opacité, la hauteur, la hauteur calculée (largeur de l’élément + bordure + remplissage), la position de l’écran sont de bons endroits pour commencer.

Souvent, vous pouvez réellement voir ce que jQuery ajoute dans le DOM au démarrage des animations (à l'aide de Firebug ). . Comme dans une animation d'opacité, vous pouvez voir le style = " opacity: 1; " ajouté juste avant que le compte à rebours à 0 ne commence.

Answer 3

Je ne voudrais pas être trop explicite lorsque je parle de performances entre navigateurs. Franchement, j’ai vu de lourdes animations JS qui vont faire pleurer Webkit, alors que FF et IE s’en occupent plutôt bien.

Il vous suffira de considérer que les navigateurs utilisent différentes implémentations CSS et JS qui rendent parfois difficile de pointer du doigt le coupable qui se cache derrière vos performances lentes.

Prenez IE. Si vous avez un élément de niveau bloc 4000x4000 et un gif transparent 2x2 configuré pour être répété, chaque fois que vous voudrez bien, déplacez l'élément IE pour redessiner le gif 2x2 et calculer l'alpha pour chacun d'eux, 2 000 fois. FF cache l’arrière-plan ou a un rafraîchissement radicalement différent, dans les deux cas, les performances sont incomparables. On ne dit pas cela dans le manuel, il faut juste faire attention à comment et à ce que vous faites.