2009-06-18 6 views
1
balisage

HTML:IE8 jQuery fadeTo

<ul id="portfolio"><li class="web"> 
      <span class="info">August 2007 <a href="http://awebsite.com" rel="external">visit</a></span> 
      <a href="/assets/image.jpg" class="fancybox" rel="web"> 
       <img src="/assets/imagelarge.jpg" alt="Rising Star Ranch" /> 
       <span class="title">Some Title</span> Some other text... 
      </a> 
     </li> 
    </ul> 

jQuery:

$("ul#portfolio li").fadeTo("slow", 0.3); 

Dans Firefox 3 et 3.5 ainsi que IE7, ce se comporte comme prévu et disparaît tous les éléments dans le 'li'. Dans IE8, rien n'est fané et aucune erreur Javascript n'apparaît lors du débogage.

La page se trouve à http://joecoledesign.com/portfolio

Merci!

+0

Oublié de mentionner. Si vous utilisez les outils de développement et regardez la source HTML, il montre le li pour avoir le style "filtre: alpha (opacité = 30); ZOOM: 1;" mais il ne montre définitivement pas de cette façon. – Joe

+0

Quelle est la version de jQuery que vous utilisez? –

+0

J'utilise le plus récent, 1.3.2 – Joe

Répondre

2

Avez-vous essayé de mettre des citations autour de ul # portfolio li? Le sélecteur est juste une chaîne, il a donc besoin de guillemets. Sans guillemets ne fonctionne même pas dans mon Firefox. Editer: OK, essayez d'appliquer le fondu à tous les sous-éléments: span et img un par un pour les démarreurs. Il pourrait en effet s'agir d'un bug d'IE. Editer: il vous manque également un devis de clôture sur id = "portfolio". Allez, mec, essaie de travailler ces choses avant de poster. Editer: btw, ce qui précède fonctionne très bien dans IE8 - je l'ai juste mis ensemble et l'ai jeté dans une page IE8 vide - le tout s'est évanoui.

Editer: Il est tout à fait possible que quelque chose d'autre sur votre page le fasse car il fonctionne très bien.

+0

Il a des citations, j'ai eu une variable là-bas et juste mettre directement là pour un exemple et j'ai oublié les citations ici. – Joe

+0

Qu'est-ce qui a fonctionné pour vous? Appliquer le fondu à chaque sous-élément? La citation manquante sur l'identificateur est parce qu'elle est générée dynamiquement et que je l'ai tapée manuellement lors de la publication ici ... oos. – Joe

+0

Non, le tout, y compris les images fanées (je mets dans une de vos URL d'image) quand j'ai seulement utilisé votre propre ligne qui fade li –

1

Très cool page Joe! La seule chose qui vient à l'esprit WRT IE8 est que jQuery peut ne pas l'avoir rattrapé, ou que quelque chose peut être drôle avec votre navigateur (comme vos paramètres javascript peuvent être modifiés).

+0

J'ai testé sa page dans IE8 et elle ne s'est en effet pas dégradée. En outre, l'exemple de jQuery fonctionne bien dans IE8. –

+0

Merci pour le commentaire sur la page;) Navigateur Javascript est certainement le défaut ... Je suis à peu près certain que c'est la première fois que je l'ai ouvert depuis que j'ai installé IE8: P Je suis assez sûr que jQuery applique réellement le style, car si vous regardez la source en utilisant IE8 Developer Tools et que vous actualisez la source des outils de développement après avoir choisi un filtre, le style est affiché comme "style = 'filter: alpha (opacity = 30); ZOOM: 1; '" On dirait un bug IE8 peut-être qu'il n'applique pas le fondu aux sous-éléments? – Joe

+0

Cela pourrait l'être - essayez de l'appliquer à span et img. –

1

J'avais le même problème avec la transparence dans IE8. Apparemment IE8 a une méthode différente de mise en transparence que IE6/7. Et malheureusement, jquery n'a aucun moyen d'animer la transparence pour IE8 pour le moment. Pourquoi Microsoft, pourquoi?!?

http://mdasblog.wordpress.com/2009/07/24/jquery-fun-with-animation-and-opacity/

Ce que j'ai trouvé sur le sujet et après l'avoir lu, j'ai renoncé à essayer de le faire fonctionner car il a confirmé ce que je pensais. Espérons que jquery l'aura corrigé dans sa prochaine version.

1

J'ai vécu la même chose et découvert grâce aux publications d'Artem que les éléments enfants de la table ne recevaient pas le changement d'opacité dans IE8. Par conséquent, il semblait à première vue que rien ne se passait. Je crois que la raison pour laquelle l'exemple de page blanche d'Artem a fonctionné et l'exemple de l'affiche originale ne l'a pas été parce qu'il n'y avait pas d'enfants dans l'échantillon d'Artem. Ajouter le fadeTo sur les éléments enfants a résolu le problème pour moi. Ancien poste, mais il a résolu mon problème, donc figuré que c'est toujours pertinent.