CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Willow
Willow

Reputation: 1040

How to fade images at different times with jQuery

I have two different images that are classed (letterfile and handfile). I want one to fade out as the other fades in and keep going like that.

This is what I have, but it is fading the images at the same time:

$( document ).ready(function() {
   setInterval(function() {
   $( ".letterfile" ).fadeToggle( "slow", "linear" );
   setTimeout(function(){
       $( ".handfile" ).fadeToggle( "slow", "linear" );
       }, 2000);
   }, 2000);
});

Any suggestions?

Upvotes: 2

Views: 998

Answers (4)

Joshua Robinson
Joshua Robinson

Reputation: 3563

Here is a simplified solution, brief explanation, and working fiddle. All jQuery animations are put on an animation queue, this is like a line to get in a store, or in this case to be executed. We don't want the animations to get in line, we want them to execute at the same time so we pass in an options object that states queue: false. We also take advantage of fadeToggle. This jQuery method fades something out by stepping the opacity to 0 and then styling it with display: none, if it already has display:none it will fade it in. We take advantage of that in our HTML.

Note also that you need to make sure and set a duration that allows the animation to fully occur before being called again by the interval, if you don't this will break things.

Working Fiddle

HTML

<div class="letterfile"></div>
<div class="handfile" style="display:none"></div>

CSS

div {
    width: 200px;
    height: 200px;
    position: absolute;
}
.letterfile {
    background-color: black;
}
.handfile {
    background-color: gold;
}

JS

setInterval(function(){
    $('.handfile, .letterfile').fadeToggle({
        queue: false,
        duration: 1250
    });
}, 2500);

Good luck!

Upvotes: 0

apaul
apaul

Reputation: 16170

I know its not exactly what you asked for, but its worth mentioning that you could use css keyframes to accomplish the same effect.

Working Example

.slide {
    opacity:0;
    animation: fadeInOut 2s infinite;
}
.letterfile{
    animation-delay: 1s;
}
@keyframes fadeInOut{
    0%{ opacity:0;}
    50%{opacity:1;}
    100%{ opacity:0;}
}

Upvotes: 0

PSL
PSL

Reputation: 123739

You have an issue because right after the first iteration it will show both of them together and from there onwards it toggles the state, i.e both visible or not visible. You can also get rid of timeouts etc and make it more generic.

Give a common class to your images(or divs or what ever you are using)

<img class="letterfile slide" src="http://placehold.it/100x100" />
<img class="handfile slide" src="http://placehold.it/200x200" />

JS

$(document).ready(function () {
    var duration = 'slow', type="linear";
    function toggleEM() {
        //Get the visible slide and after 2 sec start fade out transition
        $('.slide:visible').delay(2000).fadeOut(duration, type, function(){
            //once this is complete slide in the next one, i.e a sibling of this image
            $(this).siblings('.slide').fadeIn(duration, type, function(){
                  toggleEM(); //after that is completed start the loop again
            });
        })
    }
    toggleEM();
});

Demo

Most animation methods have a comple callback which wil l get executed when one animation is completed and preciesly in your case that is where you want to start the next fadeTransition.

Upvotes: 2

logic-unit
logic-unit

Reputation: 4303

Something like this?

http://jsfiddle.net/RqXxn/1/

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

function showLetter() {
    $( ".letterfile" ).fadeToggle( "slow", "linear", function() {
       showHand(); 
    });
}

function showHand() {
    $( ".handfile" ).fadeToggle( "slow", "linear", function() {
       showLetter(); 
    });    
}

Upvotes: 0

Related Questions