2009-02-02 6 views
2

Je voudrais fadeOut() une image sur la page et le retirer du DOM après l'animation est terminée. Cela semble assez facile?

code Exemple (image a l'id "img1"):

 
    $("#img1").fadeOut("slow", function() { $(this).remove() }); 

Cela ne ne fonctionne pas. Lorsque j'inspecte la page avec Firebug, l'image est toujours là. C'est juste caché.

Deuxième exemple qui devrait clignoter type de l'image:

 
    $("#img1").fadeOut("slow", function() { $(this).fadeIn() }); 

étrange.


Merci pour les pages d'exemple qui fonctionnent bien et comme prévu.

Le problème doit être différent et ne se produit que dans mon environnement de projet. Note de côté: quand je fais un simple console.log ($ (this)) dans ma fonction de callback, le résultat est l'objet fenêtre lui-même ?!

Lorsque je découvre les effets secondaires qui créent le problème, je vais mettre à jour cette question.

Répondre

4

Les deux exemples fonctionnent comme prévu pour moi, comme démontré here (excuses pour la mauvaise image, c'était la première chose que j'ai trouvé!). L'image 1 disparaît et est ensuite supprimée du DOM, Image2 disparaît puis revient dans la position où Image1 était initialement positionné.

Est-ce que je vous ai bien compris?

P.S. Vous pouvez modifier l'exemple here

-2

jQuery supporte Enchaînement, ce qui signifie que vous pouvez obtenir la même chose avec les commandes suivantes:

$('#img1').fadeOut('slow').remove(); 
$('#img1').fadeOut('slow').fadeIn('slow'); 

Il semble plus agréable, et ça va marcher =)

+0

Nous avons essayé ici la dernière fois que cela n'a pas fonctionné. L'image a été supprimée instantanément, j'ai donc dû utiliser la fonction de rappel, exactement comme OP l'a fait. – Tiago

+0

lorsque vous faites le chaînage, il n'est pas garanti de se produire l'un après l'autre, en fait cela arrive rarement l'un après l'autre, c'est pourquoi l'utilisation de la fonction callback assure que remove et fadeIn se produisent après le fadeOut –

1

Son travaillant pour moi. L'inspecteur HTML de Firebug 1.2.1 montre clairement l'élément à supprimer. Peut-être que vous n'utilisez pas la dernière version de JQuery?

Mon code de test est la suivante:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script> 
    $(document).ready(function(){ 

    $("p").click(function() { 
     $("p").fadeOut("slow", function() 
     { 
     $(this).remove(); 
     }); 
    }); 

    }); 
    </script> 
    <style> 
    p { font-size:150%; cursor:pointer; } 
    </style> 
</head> 
<body> 
    <p> 
    If you click on this paragraph 
    you'll see it just fade away. 
    </p> 
</body> 
</html> 
3

de requête prend en charge les enchaînant, ce qui signifie que vous pouvez obtenir la même chose avec les commandes suivantes:

$ ('# img1') .fadeOut ('lent'). remove(); $ ('# img1'). FadeOut ('lent').fadeIn ('lent');

Il semble plus agréable, et ça va marcher =)

$('#img1').fadeOut('slow').fadeIn('slow'); 

fonctionnera parce que jQuery effets file d'attente, mais lorsque vous appelez

$('#img1').fadeOut('slow').remove(); 

cadre se déroulera fadeOut en arrière-plan et actes supprimer() avant que l'objet commence même à disparaître

+1

+ 1 pour expliquer pourquoi l'effet chaining et .remove() agissent différemment –

Questions connexes