What I'm trying to do is fade a element in, and then have the element appear to be glowing by fading the opacity up and down, I want to do that for about 5 seconds, and then once thats done, I want to fade the element out...

I cannot figure out for the life of me how do do that. This is my code so far:

function showContent() { $('.item').fadeIn(3000);
$('.item').animate({opacity:'+=1'}, 1000);
$('.item').animate({opacity:'-=0.4'}, 1000);
};

Right now it's just continually flickering I want to stop that after 5 seconds and then fade it out.

Any help would be awesome!

What I'm trying to do is fade a element in, and then have the element appear to be glowing by fading the opacity up and down, I want to do that for about 5 seconds, and then once thats done, I want to fade the element out...

I cannot figure out for the life of me how do do that. This is my code so far:

function showContent() { $('.item').fadeIn(3000);
$('.item').animate({opacity:'+=1'}, 1000);
$('.item').animate({opacity:'-=0.4'}, 1000);
};

Right now it's just continually flickering I want to stop that after 5 seconds and then fade it out.

Any help would be awesome!

• javascript
• jquery
• html

• Both .fadeIn() and .animate() can be given a function to execute when the operation is plete. You need to put each subsequent function in the plete function of the previous function. – andyb Commented Apr 29, 2013 at 8:43

3 Answers 3

Don't worry about the callbacks, you can use jQuery animation queues.

$('.item')
   .fadeIn(3000)
   .delay(100)
   .fadeTo(1000, 0.4)
   .delay(100)
   .fadeTo(1000,1)
   .delay(100)
   .fadeOut(3000);

Demo: http://jsfiddle/ZvSXt/1/

I've made a working online code demo for you http://jsfiddle/alsadi/MUvqb/

in general, set sane css for the div before you animate (eg. opacity:1.0) then fade in and out and play with opacity (I don't know about += -= I just use numbers like 1.0 for 100% and 0.40 for 40% ..etc.)

$(document).ready(function(){
    $('#box').fadeIn(3000);
    $('#box').animate({opacity:1.0}, 1000);
    $('#box').animate({opacity:0.5}, 1000);
    $('#box').fadeOut(3000);
});

of course as with all jquery you can chain calls

$(document).ready(function(){
    $('#box').fadeIn(3000).animate({opacity:1.0}, 1000).animate({opacity:0.5}, 1000).fadeOut(3000);
});

You need to initialize second animation of pletion of first one, same for the third one.

so use the plete callback to initialize the next animation.

function showContent() { 
    $('.item').fadeIn(3000, function(){
        console.log('2')
        $(this).animate({opacity:'+=1'}, 1000, function(){
            console.log('3')
            $(this).animate({opacity:'-=0.4'}, 1000);
        });
    });
};

Demo: Fiddle