2011-04-11 1 views
0

J'ai une animation JQueryUI couplée à du code Jquery qui ajoute du html à la page. Le code HTML est généré en fonction des données d'un appel JQuery Ajax.Les animations Jquery se figent dans ie8

Je pensais que le gel de mes animations peut-être de l'appel Ajax, mais de ce que la question ci-dessous dit, je pense pas:

Why does my spinner GIF stop while jQuery ajax call is running?

Je pense que la question que j'ai peut-être de la même origine, cependant la question ci-dessus fournit une RAISON pour le comportement, pas une SOLUTION.

Est-ce que quelqu'un a une solution?

+0

Je devrais qualifier ce que je veux dire quand je dis congélation, il gèle momentanément, puis fini de se cacher. À un certain point arbitraire dans le slideup, l'animation gèlera pendant une seconde, puis la partie restante de la div se cachera sans animation, puis la seconde div qui vient d'être peuplée avec html sera glissée sans problème. Donc, il est clair pour moi que le chargement de la seconde div interfère avec l'animation de la seconde. – kralco626

Répondre

0

Donc je pense qu'il y a 3 "solutions" principales à ce problème; Eh bien, ils sont plus de solutions de contournement.

  1. Vous pouvez supprimer l'animation masquée. Utilisez simplement .hide(), puis utilisez une animation sur le spectacle.
  2. Vous pouvez utiliser la méthode de rappel de l'animation de masquage pour insérer le code HTML et afficher le nouveau div
  3. Vous pouvez utiliser un navigateur différent. J'ai seulement testé sur ie8/firefox/chrome; mais je voudrais dans ce cas suggérer chrome car c'est la capacité de faire ce magnifique est incroyable. Bien que je suggère normalement également Firefox, cependant dans ce cas, la manipulation de cette situation n'est pas meilleure que IE8.

Et bien sûr, je suppose qu'il y a une quatrième solution, qui est de faire avec.

0

Cette article peut vous être utile.

La partie clé des éléments HTML est la suivante:

<span id='myHiddenDiv' style='display: none'> 
    <img src='' id='myAnimatedImage' align='absmiddle'> 
</span> 
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" OnClientClick="showDiv();" Text="Search" /> 

Nous avons une durée cachée (il pourrait être un div, si vous le voulez sur une nouvelle ligne), et à l'intérieur de cette durée est notre tag img. Ensuite, dans le gestionnaire OnClientClick de notre bouton, nous appelons le "showDiv();" fonction de script client qui ressemble à ceci:

<script language='javascript'> 
    function showDiv() 
    { 
    document.getElementById('myHiddenDiv').style.display =""; 
    setTimeout('document.images["myAnimatedImage"].src="work.gif"', 200); 
    } 
</script> 

Il utilise la méthode setTimeout pour rendre le DOM réinitialiser la propriété src de l'image après 200ms. Le résultat est que lorsque vous appuyez sur votre bouton qui lance votre méthode de longue durée, l'image s'affiche et continue à animer jusqu'à ce que la publication revienne et que la page soit rechargée, après quoi l'image disparaît - exactement le comportement que nous voulons.

+0

c'est intéressant, mais dans mon cas je n'ai pas d'image. J'ai une animation JqueryUI qui gèle. Comme si j'utilise .slidUp le div va glisser la partie était en place, geler, puis finir de se cacher. Je pense que le gel vient d'ajouter du HTML à la page comme suggéré dans la question liée. Avez-vous une idée de comment je pourrais résoudre ce problème? – kralco626

+0

@ kralco626 si la diapositive est sautée consultez http://jqueryfordesigners.com/slidedown-animation-jump-revisited/ – redsquare

+0

@redsquare - Je pourrais me tromper, mais il semble que le problème sautant discuté dans cet article est un problème avec l'animation elle-même, un autre mot cela arrive quand on utilise simplement l'animation, même si rien d'autre ne se passe sur la page. Ce n'est pas ce cas, si l'animation est la seule chose qui se passe qu'il n'y a pas de problème. C'est seulement quand je le suis aussi, en préformant l'animation en préformant les appels ajax et en générant ensuite html et en l'ajoutant à la page. – kralco626