How to delay fadeIn and fadeOut

Question

There are 3 images in home page which are hidden. so what I'm trying is i want to show 3 images on there positions but with some delay.

Ex image 1 fadein with 1500 and fade out with 1000. when image 1 is fading out image 2 is fadein.

Questions

show 3 images with some delay
and after 3 images do there preview, aging loop should start with image 1.(Continuously want run)

HTML

<div class="slides">
    <div class="set1" id="1">
        <img src="image/slider/Image.png" width="950px">
    </div>
    <div class="set2" id="2">
        <img src="image/slider/Image.png" width="950px" >
    </div>
    <div class="set3" id="3">
        <img src="image/slider/Image.png" width="950px">
    </div>
</div>

JavaScript

    <script type="text/javascript">
        $(function()
        {
            var i;
            for (i = 1; i < 4; i++)
            {
                $('#'+ i).fadeIn('4000', function () {
                    $(this).delay(4000).fadeOut('4000');
                });
            }
        });
    </script>

Css

.set1
{
    bottom: 0px;
    left: 0px;
    position: absolute;
    float: left;
    width: 100%;
    display: none;
}
.set2
{
    bottom: 0px;
    left: 150px;
    position: absolute;
    float: left;
    width: 100%;
    display: none;
}
.set3
{
    bottom: 0px;
    left: 250px;
    position: absolute;
    float: left;
    width: 100%;
    display: none;
}

Take a look at the promise example http://api.jquery.com/promise/ — Leo, Jun 09 '15 at 10:22
why not use `css` then ? `transition:visibility 0s linear 5.5s,opacity 5.5s linear;` what have YOU tried ? — Pogrindis, Jun 09 '15 at 10:23
try setTimeout(function (), might be this will help you http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop — G.L.P, Jun 09 '15 at 10:23
There are multiple ways of doing this. Take a look at javascripts `setTimeout` function, just as @G.L.P mentioned a second before me ;) , or at the comment of @Pogrindis or take a look at jqueryui animations — Ch33f, Jun 09 '15 at 10:24

score 2 · Accepted Answer · answered Jun 09 '15 at 10:50

Try using jQuery animation callback and setTimeout:

var sets, index = 0; //track current set
var slider = function() {
  sets.eq(index).fadeIn(1500, function() { //fade in callback
    $(this).fadeOut(1000, function() { //fade out callback
      index = (1 + index) % sets.length; // get the next set
      setTimeout(slider, 0); // loop animation
    });
  });
};
$(function() {
  sets = $('div[class^=set]'); // cache all sets
  slider(); //start animation
});

.set1 {
  bottom: 0px;
  left: 0px;
  position: absolute;
  float: left;
  width: 100%;
  display: none;
}
.set2 {
  bottom: 0px;
  left: 150px;
  position: absolute;
  float: left;
  width: 100%;
  display: none;
}
.set3 {
  bottom: 0px;
  left: 250px;
  position: absolute;
  float: left;
  width: 100%;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="slides">
  <div class="set1" id="1">
    <img src="http://creationwiki.org/pool/images/0/0f/Person.png" width="100px">
  </div>
  <div class="set2" id="2">
    <img src="http://png-3.findicons.com/files/icons/1743/ecqlipse/128/user.png" width="100px">
  </div>
  <div class="set3" id="3">
    <img src="https://cdn4.iconfinder.com/data/icons/dot/128/man_person_mens_room.png" width="100px">
  </div>
</div>

score 1 · Answer 2 · answered Jun 09 '15 at 10:28

1

use this function instead

function doStuff (i) {
   i = i || 0; // in case you called the function first time without arguments
   $('#'+ i).fadeIn('4000', function () {
       $(this).delay(4000).fadeOut('4000');
   });
   if (i<4) {
       setTimeout(function () { 
            doStuff(i+1);
       }, 1000);
   }
}

the second argument of setTimeout is the amount of time you want to wait between actions

answered Jun 09 '15 at 10:28

Khalid

4,730
5
27
50

i want replace this to my code or want place some where else?? – Abdulla Nilam Jun 09 '15 at 10:35

score 1 · Answer 3 · answered Jun 09 '15 at 10:45

Non-js solution using css3 key-frame and animations

https://jsfiddle.net/m95tztc7/1/

<div class="box b1 fadeInOut">
    <img src="IMAGE SOURCE"/>
</div>
<div class="box b2 fadeInOut">
    <img src="IMAGE SOURCE"/>
</div>
<div class="box b3 fadeInOut">
    <img src="IMAGE SOURCE" />
</div>

@-webkit-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fade {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fade {
  0%   { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0;}  
}

.box{
    height:100px;
    width:100px;
    opacity:0;
    position:absolute;
}

img{
    width:100%;
}



.fadeInOut.b1{
    animation : fade 6s infinite;
    }


.fadeInOut.b2{
    animation : fade 6s infinite;
    animation-delay : 2s
    }

.fadeInOut.b3{
    animation : fade 6s infinite;
    animation-delay : 4s
    }

score -1 · Answer 4 · edited Jun 09 '15 at 12:37

-1

Try this..

$(function()
{
    var i;
    for (i = 1; i < 4; i++)
    {
        $("#1, #2, #3").hide().each(function(i) {

          $(this).delay(i*4000).fadeIn(4000);
        $(this).delay(i*4000).fadeOut(4000);
    });
    }
});

edited Jun 09 '15 at 12:37

Aurelio

24,702
9
60
63

answered Jun 09 '15 at 11:11

varsha nb

1

How to delay fadeIn and fadeOut

4 Answers4