单击按钮，只显示一个动画，如果不可见

我试图用各种方法得到这个工作 - 所有没有喜悦 - 我有几个动画和两个按钮。我希望得到任何帮助单击按钮，只显示一个动画，如果不可见

的动画最初隐藏 - 我需要一个“如果”语句只允许一个动画在任何一个点显示 - 这是我的代码的哈希...

<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>

来源

2014-01-14 alib0ng0

可以请你多解释一下。我无法得到你。 –

看看这个：http://tinyurl.com/onanufn - 如果你点击顶部的按钮，气泡就会淡入，动画就开始了 - 我只想一次看到一个气泡。 – alib0ng0

我结束了使用fadeIn（）;消退（）;延迟（）;然后使用finish（）;取消动画！

来源

2014-01-17 08:46:46 alib0ng0

如果你想要一个“链式动画”，你必须使用回调，像这样：

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

来源

2014-01-14 08:30:27 naoxink

好的谢谢 - 但我只需要一个“链式动画”一次显示。即如果您单击bump02泡泡动画播放，如果您单击btn03泡泡02动画消失，并且泡泡03动画播放 – alib0ng0

这是使用回调的一个示例，因此您必须考虑动画的顺序。即bbl3出现，bbl2眨眼，bbl2淡出..等 – naoxink

谢谢，但这不是什么即时消息队友后 - 我使用setTimeout的全部原因是因为泡沫中有信息需要阅读，泡沫需要淡出和事实泡沫需要淡化 - 我很满意该代码 - 我需要的是一次显示一个动画 – alib0ng0

单击按钮，只显示一个动画，如果不可见

回答

相关问题