Question

我有2个测试页http://www.emoceanstudios.com.au/test.php和http://www.emoceanstudios.com.au/test2.php，这是第一页的相关脚本：

<script type="text/javascript">
function slide_out(){
    $('#red-block').animate({
        marginLeft: -278
    }, 500);
    $('#yellow-block').animate({
        marginTop: -316
    }, 500);    
    $('#gray-block').animate({
        marginLeft: 278
    }, 500, function(){
        $('#three-color-container').fadeOut(500, function() {
            $('#three-color-container-new').fadeIn(500, function() {
                window.setTimeout(function(){slide_in()}, 4000);
            });
        }); 
    }); 
}
function slide_in(){
    $('#three-color-container-new').fadeOut(500, function() {
        $('#three-color-container').fadeIn(500, function(){
            $('#red-block, #yellow-block, #gray-block').animate({
                marginLeft: 0,
                marginTop: 0
            }, 500, function() {
                window.setTimeout(function(){slide_out()}, 4000);
            });
        });
    });
}

window.setTimeout(function(){slide_out()}, 4000);
</script>

现在红色的黄色灰色块滑动如下：out，in，out，in，out然后闪烁（这不是我想要的），只能工作两个半圈。如果我将计时器从4000设置为6000，它最多可以运行3个循环，然后也会中断。

我希望它能够进出，进出，进出，进出，进出，进出，进出，进出，进出，......永远我想这个问题可能在setTimeout函数中。但有人怀疑这是因为三个动画调用下一个函数三次，所以我修改并创建了第二个页面，将三个动画放入一个函数然后回调下一个函数，这里是代码：

<script type="text/javascript">
function slide_out(){
    block_out(callback);
}
function slide_in(){
    $('#three-color-container-new').fadeOut(500, function() {
        $('#three-color-container').fadeIn(500, function(){
            $('#red-block, #yellow-block, #gray-block').animate({
                marginLeft: 0,
                marginTop: 0
            }, 500, function() {
                window.setTimeout(function(){slide_out()}, 4000);
            });
        });
    });
}
function block_out(callback){
    $('#red-block').animate({
        marginLeft: -278
    }, 500);
    $('#yellow-block').animate({
        marginTop: -316
    }, 500);    
    $('#gray-block').animate({
        marginLeft: 278
    }, 500);    
    callback();
}
function callback(){
    $('#three-color-container').fadeOut(500, function() {
        $('#three-color-container-new').fadeIn(500, function() {
            window.setTimeout(function(){slide_in()}, 4000);
        });
    }); 
}
window.setTimeout(function(){slide_out()}, 4000);
</script>

现在它变为4-5循环的工作，然后再次中断。

Javascript setTimeout函数问题或回调问题

0 个答案: