animer l'opacité, insérer le html, animer l'opacité dans

Question

Avec ma jquery j'essaye de faire la transition d'un message à une fonction de chargement facile sur les yeux en animant l'opasity du message, en insérant le loading.gif et animer l'opacité. Il échoue.

$('#powerSearchSubmitButton').click(function(ev) { 
    startLoad(); 
    return false; 
}); 
function startLoad() { 
    $('.message').each(function(i) { 
     $(this).animate({opacity: 0}, 500, function() { 
      $(this).html("<img src=\"/content/pics/loadingBig.gif\" alt=\"loading\" style=\"opacity:0\"/>"); 
      $(this).animate({opacity: 1},500); 
     }); 
    }; 
    return true; 
}; 

Quand je quitte le .html() appel, il fonctionne très bien (sauf l'image est pas là bien sûr, donc je pense qu'il est beacuse le code html n'est pas inséré avec l'opacité: 0; Mais quand je l'inséra avec style = « opacité: 0 » il ne peut pas disparaître en arrière ...

Qu'est-ce que je fais mal

Answer 1

Appliquer l'animation à un conteneur à la place, ou utiliser la méthode Css()? pour définir l'opacité (les styles en-ligne peuvent interférer avec la capacité de jQuery à animer les propriétés correspondantes)

Answer 2

Ne donnez pas l'image style = "opacity: 0;" - il ne sera pas visible tant que son parent est caché, et, comme vous l'avez découvert, il restera à 0 opacité une fois que le parent sera de retour.

Vous pouvez également utiliser les fonctions fadeIn et FadeOut de jQuery au lieu d'animer manuellement.

Answer 3

Essayez ceci:

$(this).fadeOut(500, function() { 
    $(this).html("<img src='content/pics/loadingBig.gif' alt='loading'/>"); 
    }); 
$(this).fadeIn(500);