Faisal Faisal - 1 month ago 13
jQuery Question

How to make fade in and fade out for different images in same place using Jquery?

I have five images. It's like header logo. I want to show those images like first image should fade out, then second image should display in the same place and then third image and then again first image. It should keep on fade in and fade out.

html code:

<div id="slideshow">
<div>
<img id="img1" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/>
</div>
<div>
<img id="img2" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/>
</div>
<div>
<img id="img3" src="images/heading%20bar%201.png" style="height: 150px; width: 100%; padding-bottom: 10px;"/>
</div>
</div>




jquery code

$(document).ready(function () {
$("#slideshow > div:gt(0)").hide();

setInterval(function () {
$('#slideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#slideshow');
}, 3000);
})


when i try this code first it appears all images in three rows and then fadeout one by one, when it do second time, first image went to second row,then fade in second image in first row, like that it's working.

I want first image should fadeout and then second image should fade in, then third image.

I am new to Jquery, Thanks

Answer

Just change your HTML to have the follow inline CSS.

<div id="slideshow" style="margin:50px auto;position:relative; width:400px; height:250px; padding:10px;">
    <div>
      <img id="img1" src="http://lorempixel.com/400/250/" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/>
    </div>
    <div>
      <img id="img2" src="http://lorempixel.com/400/250/sports" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div>
    <div>
      <img id="img3" src="http://lorempixel.com/400/250/animals" style="position:absolute;top:10px;bottom:10px;left:10px;right:10px;"/> 
    </div>
</div>

Check out https://jsfiddle.net/u15qvgdd/ to see how this works