Question

我试图通过各种方法实现这一点 - 一切都没有乐趣 - 我有几个动画和两个按钮。我将不胜感激任何帮助

动画最初是隐藏的 - 我需要一个'if'语句，它只允许一个动画显示在任何一个点上 - 这是我的代码哈希...

<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

如果你想要一个“链式动画”，你必须使用回调，如下所示：

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

Answer 2

我最终使用了fadeIn（）;淡出（）;延迟（）;然后使用finish（）;取消动画！

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

2 个答案: