Fading from image to image (not image to white to image) using Javascript

Question

I have a "slideshow" type of function where images fade in and out to each other. It works fine, but when it fades, it is fading the first picture out to white and then the second picture fades in. What I want is for the first image to fade right into the second (with no empty white background in between). Can I do this?

Here is an example: http://jsfiddle.net/aegtjm5y/5/

image

<img id="image1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" style="width: 100%;">

JS

var curIndex = 0;
var src = ['/images/IMG_20140907_203614.jpg', 'http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg', 'http://cvcl.mit.edu/hybrid/cat2.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 1000;

$(document).ready(function(){
    switchImageAndWait(true);
});

function switchImageAndWait(fadeOut2){
    if(fadeOut2){
        setTimeout(fadeOut, waitTimeInMilliseconds);
    }else{
        var index = Math.floor((Math.random()*src.length))
        if(curIndex == index){
            index++;
            if(index >= src.length){
                index-=2;
            }
        }
        curIndex = index;
        $("#image1").attr("src", src[index]);
        fadeIn();
    }
}

function fadeOut(){
    $("#image1").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}

function fadeIn(){
    $("#image1").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}

Adrian · Accepted Answer · 2014-09-29 18:16:36Z

1

Edit: "Can I do this?" - No. You can't do this using only one image element.

What you basically need is two images one on top of the other.

I edited your fiddle and it's working fine: JSFiddle

So basically I added another img element and set the position of the images to be absolute (so they are overlaying).

<img id="image2" src="http://cvcl.mit.edu/hybrid/cat2.jpg" style="width: 100%;position: absolute;">

I updated the javascript stuff so the images get changed in both fadeIn and fadeOut "events". The principle is that the upper image gets faded out and faded In. When it's not visible you change the src of it. And when it is visible you change the src of bottom image.

I can't think of better solution now. Hope this helps..

answered Sep 29, 2014 at 18:16

Adrian

9031 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nick Over a year ago

I am planning on doing this in a grid of images using inline-block. When I use position: absolute for the images, it doesn't fit right. Example: this should have a grid of 8 dogs and one cat, but the cat (whose position is absolute) overlaps the dogs. Any idea why? jsfiddle.net/cdno7svf/6

Adrian Over a year ago

If you know the image dimensions, you can relatively position the overlaying image (set it's top position to "-{it's height}" and set negative bottom margin for the div which is holding the images jsfiddle.net/cdno7svf/7

Collectives™ on Stack Overflow

Fading from image to image (not image to white to image) using Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related