Fading between images

Question

How can i fade rotate between two images using jQuery? Say for example.

<img src="image01.jpg" />
<img src="image02.jpg" />

I like the images to fade in/out between for say 2seconds each.

Thanks! Much appreciated. :)

Solution 1

A simple example i knocked up.

<div id="imageSwap">
</div>  


 <script language="javascript" type="text/javascript">

    $(document).ready(function () {
      setImageOne();
    });

    function setImageOne() {
      $('#imageSwap').fadeIn(500).html('<img src="image01.jpg" />').delay(2000).fadeOut(500, function () { setImageTwo(); });
    }

    function setImageTwo() {
      $('#imageSwap').fadeIn(500).html('<img src="image02.jpg" />').delay(2000).fadeOut(500, function () { setImageOne(); });
    }

  </script>

Solution 2

rewrite your html to

<div>
<img class="current slide" src="image01.jpg" style="position:absolute;"/>
<img class="slide" src="image02.jpg" style="position:absolute;display:none"/>
<img class="slide" src="image03.jpg" style="position:absolute;display:none"/>
<img class="dummy" src="image01.jpg" style="visibility:none;"/>
</div>

I added a 3rd image for clarity. Add a jquery function like

function nextSlide() {
    jQuery('.slide.current').each(function() {
        var next = jQuery(this).next('.slide');
        if (!next.size()) next = jQuery(this).siblings('.slide').eq(0);
        jQuery(this).fadeOut().removeClass('current');
        next.fadeIn().addClass('current');
    }); 
    slidetimer=setTimeout('nextSlide()',slidespeed);
}

And in your base javascript, add

var slidespeed = 2000;
var slidetimer = null;
jQuery(document).ready(function() {
    nextSlide()
});

I didnt test this exactly like this, so typoos may be there. The surrounding div ensures that all slide images are located on the spot where the div is located, because of their position:absolute. the dummy image is not visible, but does fill up the space needed to make the surrounding div actually wrap around all the images. You may not need this.

Your images should have similar sizes, or at least the dummy should be as big as the biggest image.

$2c, *-pike

Solution 3

You can do it without jquery. Only with css : And cool fade between image

.fade img {
  transition: all .8s;
  max-width: 200px;
}
.fade:hover img:nth-child(2) { 
	opacity: 0;
}
.fade img:first-child { 
  position: absolute;
	z-index: -1;
}

<div class='fade'>
  <img src="https://image.freepik.com/free-vector/software-logo_1103-316.jpg">
  <img src='https://image.freepik.com/free-vector/m-letter-logo-template_1061-150.jpg'>
</div>

Comments

[commonpike]

I've just got an update on this ? thanks, but hey, this is 2015, dont do this using javascript. use css animations. optionally, use javascript to toggle classes on setInterval and use css transitions to fade on those classes.