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!