click button, show only one animation if not visible

Question

I've tried to get this working with various methods - all without joy - i have a couple of animations and two buttons. I would appreciate any help

The animations are initially hidden - i need an 'if' statement which allows only one animation to show at any one point - here's my hash of code...

<script type="text/javascript">
$(document).ready(function () {
//hide bubble facts
$('#bubble02,#bubble03').css("display", "none");
$('#fact02,#fact03').css("display", "none");        

//btn02
$('#btn02').click(function() {
setTimeout(function() {
$('#bubble02').fadeIn();
}, 1000);
setTimeout(function() {
$('#bubble02').fadeOut();
$('#fact02').fadeIn();
}, 6000);
setTimeout(function() {
$('#fact02').hide();
}, 12000);
});


//btn03
$('#btn03').click(function() {
setTimeout(function() {
$('#bubble03').fadeIn();
}, 1000);
setTimeout(function() {
$('#bubble03').fadeOut();
$('#fact03').fadeIn();
}, 6000);
setTimeout(function() {
$('#fact03').hide();
}, 12000);
}); 
</script>

Answer 1

I ended up using fadeIn(); fadeOut(); with a delay(); and then using finish(); to cancel the animation!

Answer 2

If you want a "chained animation" you have to use the callbacks, something like this:

$('#btn02').click(function() {
    setTimeout(function() {
        $('#bubble02').fadeIn(100, function(){
            setTimeout(function() {
                $('#bubble02').fadeOut();
                $('#fact02').fadeIn(100, function(){
                    setTimeout(function() {
                        $('#fact02').hide();
                    }, 12000);
                });
            }, 6000);
        });
    }, 1000);
});