Cycle fadeIn and fadeOut between 2 images

I took a look at some answers already posted but didn't find the correct way to do this.

I have 2 images in the same div, one is visible the other is set to display:none;

I want a non-ending loop between the 2 images, with the fade-out/fade-in effects, without any jQuery plugin.

I think开发者_StackOverflow社区, it's just a few lines of code.

The elegant yet simple way:

function fadeShow(fadeTime, fadeDelay) {
  var $topImage = $("#fadeBox img:last");
  $topImage.fadeTo(fadeTime, 0, function() {
    $topImage.fadeTo(fadeDelay, 0, function() {
      $topImage.fadeTo(0, 1);
      $topImage.insertBefore("#fadeBox img:first");
      fadeShow(fadeTime, fadeDelay);
    });
  });
}

fadeShow(2000, 5000);

#fadeBox {
  position: relative;
}

#fadeBox img {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fadeBox">
  <img src="https://lh5.googleusercontent.com/-vp16kljkPwg/AAAAAAAAAAI/AAAAAAAAAKg/Ypz8rdBRFjQ/s200-c/photo.jpg">
  <img src="https://lh5.googleusercontent.com/-uQqDiQ92aZQ/TiZspaC99wI/AAAAAAAAAFE/KZU_RIKUfTI/s200-c/photo.jpg">
</div>

View on JSFiddle

Supports multiple images but they must all be the same size. have fun. :)

This is just a quick and dirty solution but maybe it could help you get an idea of how to tackle your problem...

function swap ( $img1 , $img2, speed ) {
    $img1.stop().fadeOut(speed);
    $img2.stop().fadeIn(speed);

    setTimeout( function () { swap( $img2, $img1, speed) }, speed );
};

var blink_data={};
function start_blink(id)
{
    blink_data={subj:document.getElementById(id),duration_in:600,duration_sus:400,time_in:new Date,proc_in:function(){
        var c=new Date;
        var d=(c.getTime() - blink_data.time_in.getTime())/blink_data.duration_in;
        if(d>1){
            d=1;
            clearInterval(blink_data.interval);
            blink_data.interval=null;
            blink_data.timeout=setTimeout(function(){
                blink_data.interval=setInterval(blink_data.proc_out,50);
                blink_data.time_out=new Date;
                blink_data.timeout=null;
            },blink_data.duration_sus);
        }


        blink_data.subj.style.filter="alpha(opacity="+d*100+")";
        blink_data.subj.style.opacity=d;

    },duration_out:600,time_out:new Date,proc_out:function(){
        var c=new Date;
        var d=(c.getTime() - blink_data.time_out.getTime())/blink_data.duration_out;
        if(d>1){
            d=1;
            clearInterval(blink_data.interval);
            blink_data.interval=null;
            blink_data.timeout=setTimeout(function(){
                blink_data.interval=setInterval(blink_data.proc_in,50);
                blink_data.time_in=new Date;
                blink_data.timeout=null;
            },blink_data.duration_sus);
        }

        d=1 - d;
        blink_data.subj.style.filter="alpha(opacity="+d*100+")";
        blink_data.subj.style.opacity=d;

    },timeout:null,interval:null};
    blink_data.interval=setInterval(blink_data.proc_in,50);
}

function stop_blink()
{
    if(blink_data.timeout){
        clearTimeout(blink_data.timeout);
    } else if(blink_data.interval){
        clearInterval(blink_data.interval);
    }
    blink_data.subj.style.filter="alpha(opacity=0)";
    blink_data.subj.style.opacity=0;
}

You only have to fadein/out one image (if you're not using transparent images) and let the image on top fade in and out. (And remove the display:none style)

if you have a structure like this:

<div>
<img id='img1' src='path/to/image.jpg'/>
<img id='img2' src='path/to/image2.jpg'/>
</div>

call the function with

start_blink('img2');

Say your html is :

<div>
    <img src="..." id="img1"/>
    <img src="..." id="img2"/>    
</div>

Your JavaScript can be something like that :

fadeOutIn('#img1', '#img2');



function fadeOutIn(elmt1, elmt2){
    alert("1");
    $(elmt1).fadeOut(1, function(){

        $(elmt2).fadeIn(1, function(){
            //add a time out here if you want the image to stay for a while before fading
            fadeInOut(elmt2, elmt1);
        }):

    });   
}

That is if you want the fade out and fade in to happen separately, if you want them to happen concurrently then call them at the same time like in Greg's answer.