CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3795306
user3795306

Reputation: 9

I need to close a gap in this JQuery animation

Here is my Jquery code:

var img = function() { 
    $(".slider#1").delay(1000).fadeIn(1000); 
    $(".slider#1").delay(3000).fadeOut(1000);
    $(".slider#2").delay(5000).fadeIn(2000); 
    $(".slider#2").delay(3000).fadeOut(1000); 
    $(".slider#3").delay(10000).fadeIn(2000); 
    $(".slider#3").delay(3000).fadeOut(1000); 
    $(".slider#4").delay(15000).fadeIn(2000); 
    $(".slider#4").delay(3000).fadeOut(1000, function() { img() }); 
};

Essentially what I am trying to do is when one image fades out I would like an image to almost be behind it and fade straight into that without being a blank space in between, is this possible?

Upvotes: 1

Views: 143

Answers (2)

Jay S.
Jay S.

Reputation: 1327

You could use the jQuery fadeTo function.

Like

$(".slider#1").fadeTo(1000,1);

And make all your sliders overlap each other with opacity 0.

Edit :

You can try this fiddle : http://jsfiddle.net/8cwA6/22/

It recursively changes the opacity. All the images are on top of each other, then it fades out Level 1, then Level 2, and then fades both of them back (because Level 3 is on the bottom). You'll probably understand better when you see the code.


JavaScript

var max = 3
var min = 1
var showTime = 1500

function fade(num) {
  if (num > min) {
    $('.' + num).delay(showTime).fadeTo("slow", 0, function() {
      fade(num - 1);
    });
  } else {
    $("div").delay(showTime).fadeTo("slow", 1, function() {
      fade(max)
    });
  }
}
fade(3);


HTML

<div id="img1" class="1"></div>
<div id="img2" class="2"></div>
<div id="img3" class="3"></div>


CSS

#img1 {
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    top:0;
    left:0;
    opacity :1;
    z-index :1;
}
#img2 {
    width:100px;
    height:100px;
    background-color:blue;
    position:absolute;
    top:0;
    left:0;
    opacity :1;
    z-index :2;
}
#img3 {
    width:100px;
    height:100px;
    background-color:green;
    position:absolute;
    top:0;
    left:0;
    opacity :1;
    z-index :3;
}

Upvotes: 3

Drea58
Drea58

Reputation: 438

You have to queue the animations, or they will get mixed up after some time, since your animations are running asynchronous;

I did stack all images, and all are visible (you could set z-index just to be certain). Fading out the top most, the next one is showing up. The bottom most, doesn't have to be faded. I fade in the first one again, before resetting/showing all the other images once again and resetting the recursion.

jsfiddle http://jsfiddle.net/Drea/hkzbvew4/

js

var images = ['.slider1', '.slider2', '.slider3', '.slider4']; // .slider4 is always visible

var img = function (i, showtime, fadetime) {
    $(images[i]).delay(showtime).fadeOut(fadetime).queue(function () {
        i++;
        if (i < images.length-1) { // run through images
            img(i, showtime, fadetime);
            $.dequeue(this);
        } else { // reset animation
            $(images[0]).delay(showtime).fadeIn(fadetime).queue(function () {
                $(".slide").fadeIn(0);
                img(0, showtime, fadetime);
                $.dequeue(this);
            });
            $.dequeue(this);
        }
    });
};

img(0, 1000, 1000);

html

<div class="slide slider4"></div>  
<div class="slide slider3"></div>  
<div class="slide slider2"></div>  
<div class="slide slider1"></div>

css

.slide {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 50px;
}
.slider1 {
    background-color: black;
}
.slider2 {
    background-color: green;
}
.slider3 {
    background-color: blue;
}
.slider4 {
    background-color: red;
}

Upvotes: 0

Related Questions