Pourquoi jQuery fadeIn() et fadeOut() semblent bizarres dans cet exemple?

J'ai joué avec jQuery dans un projet ASP.NET et je trouve un comportement étrange avec les fonctions .fadeIn() et fadeOut(). Dans l'exemple ci-dessous, un clic sur le bouton (ID Button1) est censé provoquer à la fois la plage de texte avec l'ID Label1 et le bouton avec l'ID TextBox1 pour faire les choses suivantes:Pourquoi jQuery fadeIn() et fadeOut() semblent bizarres dans cet exemple?

Fade Out
Modifier le texte à la fois la zone de texte et la portée du texte à You clicked the button
Fondu

Basé sur le navigateur que je utilise, je reçois 3 scénarios différents, et chaque élément fonctionne différemment dans chaque situati sur. Voici ce qui se passe quand je clique effectivement sur le bouton:

TextBox1:

Dans IE8, la zone de texte disparaît, modifie le texte, puis esquives dans
Dans IE8 Affichage de compatibilité, la zone de texte se fane sort, change le texte, puis revient en arrière. Cependant, le texte dans la boîte semble un peu différent qu'avant le clic sur le bouton.
Dans FireFox 3.5.8, la zone de texte ne disparaît pas (mais elle "pause" pendant le temps que le fondu prendrait), change le texte, puis semble "faire une pause" là où elle le ferait se faner dans

Label1.

dans IE8, l'étiquette ne se fanent pas (mais il ne « pause » pour la durée pendant laquelle le fondu prendrait), fait modifier le texte , puis semble "faire une pause" à nouveau où il serait en train de disparaître.
Dans IE8 Compatibility View, l'étiquette ne fondu, modifier le texte et fondu, mais le texte semble un peu différent qu'avant le clic sur le bouton.
Dans FireFox 3.5.8, l'étiquette ne disparaît pas (mais elle "pause" pendant le temps que le fondu prendrait), change le texte, puis semble "faire une pause" là où elle serait la décoloration dans

Deux questions:.

ce qui se passe pour faire de chaque élément à se comporter différemment dans les différents navigateurs?
Existe-t-il un meilleur moyen d'obtenir les fonctionnalités que je recherche sur plusieurs plates-formes?

Voici le code source du fichier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head><title> 

</title> 
    <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("#Button1").click(function(event) { 
      $("#Label1").fadeOut("slow", function() { 
      $(this).text("You clicked the button");    
      $(this).fadeIn("slow"); 
      }); 
      $("#TextBox1").fadeOut("slow", function() { 
      $(this).val("You clicked the button").fadeIn("slow");    
      $(this).fadeIn("slow"); 
      }); 
      event.preventDefault(); 
     }); 
     $("a").click(function(event) { 
      $("#Label1").text("You clicked the link"); 
      $("#TextBox1").val("You clicked the link"); 
      event.preventDefault(); 
     }); 
     }); 

    </script> 

</head> 
<body> 
    <form name="form1" method="post" action="Default.aspx" id="form1"> 
<div> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNTQwMjM5ODcyZGT6OfedWuFhLrSUyp+gwkCEueddvg==" /> 
</div> 

<div> 

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwK56uWtBwLs0bLrBgKM54rGBotkyyA5RRsPBGNaPTPCe7F5ARwv" /> 
</div> 
    <div> 

     <span id="Label1" style="color:#009900;">Type Something Here:</span> 
&nbsp; 
     <a href="http://www.google.com">This is a test Link</a> 
     <input name="TextBox1" type="text" value="test" id="TextBox1" style="width:258px;" /> 
     <br /> 
     <br /> 
     <input type="submit" name="Button1" value="Button" id="Button1" /> 

    </div> 
    </form> 
</body> 
</html>

Source

2010-04-07 Ben McCormack

J'ai connu le même problème. Afin de le réparer, j'ai essayé cela et cela a fonctionné.

Au lieu de:

<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

J'utilisé:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Essayez d'utiliser une autre version ou l'obtenir à partir d'une autre source, si vous avez vraiment besoin de la version Visual Studio.

Source

2010-04-07 18:19:49

c'est tellement bizarre. L'utilisation de jQuery 1.4.2 le fait fonctionner avec FireFox, mais cela ne fonctionne toujours pas avec IE8. Merci pour la suggestion. –

Déposez la balise de compatibilité IE7 et corrigez-la pour qu'elle fonctionne avec cette version de jQuery. (dans la tête) –

@Ben McCormack, assez étrange en effet. Frustration Visual Studio! –

Pourquoi jQuery fadeIn() et fadeOut() semblent bizarres dans cet exemple?

Répondre

Questions connexes