CODEWITHSUNDEEP
javascriptjquerywordpressfade
Paul Vincent
Paul Vincent

Reputation: 41

jQuery fadein and fadeout simulaneously

I currently use the following to fade images on my site:

$(document).ready(function() {
    $('ul.image-switch li').mouseover(function(e) {
    if (e.target.nodeName.toLowerCase() == 'a') return;

    var image_src = $('a', this).data('image');
    var img = $('.image-container img');

    if (img.attr('src') != image_src) { // only do the fade if other image is selected
        img.fadeOut(200, function() { // fadeout current image
            img.attr('src', image_src).fadeIn(200); // load and fadein new image
        });

    }
});
});​

An example of this in action is at http://www.sehkelly.com/#news.

As you can see, the current image must fade out before the new one fades in.

I'd like the action to be simulaneous. Please -- does anyone know how I can achieve this?

Many thanks.

EDIT: Clueless novice. Code examples very much appreciated.

Upvotes: 0

Views: 491

Answers (2)

Ruan Mendes
Ruan Mendes

Reputation: 92314

Here's an implementation of Ulflander's idea, since the code posted is not complete http://jsfiddle.net/8nBqD/1/

The trick is to absolutely position the second image on top of the one you're fading out

HTML

<img id='pic1' src="http://periodictable.com/Samples/009.3b/s7.JPG" />
<img id='pic2' src="http://icons.iconarchive.com/icons/vargas21/aquave-metal/256/Sample-icon.png" />

CSS

#pic2 {
   position: absolute;
   display: none;
}​

JS

// Fade out the image, and replace it with the new one after the fade is over
$("#pic1").fadeOut(500, function() { // fadeout current image
    this.src = 'http://icons.iconarchive.com/icons/vargas21/aquave-metal/256/Sample-icon.png';        
    $(this).show();
});

// Fade in the new image placing it on top of the original one
$("#pic2").offset($("#pic1").offset()).fadeIn(500, function(){
    // Hide it since we are showing the original image with the new src        
    $(this).hide();
});

We could even write a plugin to make this easy to reuse

(function($) {
    $.fn.imageFader = function(newSrc, seconds) {
        $(this).each(function() {
            var $img = $(this);
            $img.fadeOut(seconds, function() {
                this.src = newSrc;
                $img.show();
            });
            var $tempImg = $('<img src="'+newSrc+'" style="position:absolute;display:none;" />').appendTo('body');
            $tempImg.offset($img.offset()).fadeIn(seconds, function(){
                $tempImg.remove();
            });
        });
    };
})(jQuery);

And use it like http://jsfiddle.net/8nBqD/5/

$('img').imageFader('picture.png', 1000);

Upvotes: 0

Ulflander
Ulflander

Reputation: 658

Create a new img element on top of the actual one, then fadeIn this new image. You'll need a bit of css to put the new image on top of the old one.

In no way you can do that with only one img element.

if (img.attr('src') != image_src) { // only do the fade if other image is selected
    img.after(
        $('<img />').attr('src', image_src).fadeIn(200)
    );
    img.fadeOut(200);

}

You would too want to wait for the new image to be loaded before starting fades. (checkout jQuery doc for the right function for that, and fade the images in the load callback).

Upvotes: 2

Related Questions