Use jQuery para desvanecer la imagen

I am using the following script to fade an image out after 5 seconds:

var $j = jQuery.noConflict();
$j(document).ready(function() { 
    var fade_out = function() {
        $j("#fadeout").fadeOut().empty();
    }
    setTimeout(fade_out, 5000);
}); 

When the image goes away it just disappears. I want the image to slowly fade out over a second or so. How can I do this?

preguntado el 04 de julio de 12 a las 08:07

2 Respuestas

Put the empty method in the fadeOut callback:

var $j = jQuery.noConflict();
$j(document).ready(function() { 
var fade_out = function() {
        $j("#fadeout").fadeOut(1000, function() { $j("#fadeout").empty(); });
    }

    setTimeout(fade_out, 5000);
}); 

Respondido 04 Jul 12, 08:07

That worked, one more question though, the content below the image I am fading out jumps when it goes away, is there a way to prevent the content below from jumping? (I do not care if the image that is faded out takes up the space long as it is no visible.) - L84

Can you show us the html? You have to set the width and height of a parent element. If the next element has the same parent you have to wrap the image in a container with a height and width. - procesador

you could wrap $j("#fadeout") into a container with a fixed height - Fabricio Calderan

var el = $j("#fadeout");
el.fadeOut(1000, function() { el.empty(); })

1000 is the time in milliseconds taken by the effect to complete the fadeOut

You may want to cache a reference to the element (since you need to use it twice)

Respondido 04 Jul 12, 08:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.