CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
Faisal
Faisal

Reputation: 179

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

Upvotes: 0

Views: 721

Answers (2)

Nagu_R
Nagu_R

Reputation: 89

$(function() {
    // match all divs with ID starting with 'photo'
    $("div[id^=photo] > img").hide();
    setTimeout(function(){
       $("div[id^=photo]").each(function() {
           var rand = Math.floor(Math.random() * $(this).children().length);
           $(this).find('img:eq(' + rand + ')').fadeIn();
       });
    }, 500);       
});

Upvotes: 0

Dominick
Dominick

Reputation: 140

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

Upvotes: 1

Related Questions