CODEWITHSUNDEEP
javascriptjqueryhtml
johnnyxbell
johnnyxbell

Reputation: 27

How can I animate for 5 seconds and then fadeOut() jquery

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!

Upvotes: 1

Views: 4586

Answers (3)

Muayyad Alsadi
Muayyad Alsadi

Reputation: 1593

I've made a working online code demo for you http://jsfiddle.net/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);
});

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

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

so use the complete 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

Upvotes: 0

ahren
ahren

Reputation: 16961

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.net/ZvSXt/1/

Upvotes: 5

Related Questions