0

我尝试div在HTML文档中的不同之间切换。这是我的代码：

    <div id="screen1" class="current">
            <div id="press_any_key_to_continue"> <font style="font-family: verdana" color="yellow">Press Enter to start</font></p> </div>


    <script>
    var container;
    var camera, scene, renderer;

    init();
    animate();
    //And a lot of THREE.js code..

    </script>

    </div>
<div id='screen2'>
<p>Some content goes here</p>
</div>

我的 jQuery 方法 Fade out the divwhich idisscreen1和 Fade in another divwith id screen2，如下所示：

$(document).keyup(keyUpHandler);

function keyUpHandler(e) {


    if (e.keyCode == 13) {

        var id = $('.current').attr('id');

        console.log('The id of the current div is: ' + id);
        if (id == 'screen1') {


            toggleDivs('screen2');
        }
    }

}


function toggleDivs(id) {

    console.log('Hello world, the id passed is: ' + id);

    $('.current').fadeOut(600, function () {
        $('#' + id).fadeIn(600);
        $('.current').removeClass('current');
        $('#' + id).addClass('current')
    });
}

到目前为止一切顺利，screen2 出现了很好的淡入效果，但 screen1 没有淡出，假设 screen1 中的 html 部分成功淡出，但 javascript 部分没有淡出。

所以我假设淡出不会停止 JS 脚本。否则我该如何解决这个问题。谢谢。

4

3 回答 3

0

要停止动画，您想使用，.stop但是在您的代码中并不明显这将是一个问题。

于 2012-09-18T17:20:45.970 回答
0

animate() 函数开始类似于“后台进程”，然后函数的其余部分继续。这只是 Javascript 工作的一种效果——因为当前窗口中的所有内容都会animate()在 Javascript 运行时冻结[1]，因此会设置一个计时器，每隔几毫秒就会执行下一个需要完成的动画。

我不知道您正在使用的库，但如果有对 a 的引用callback，那么这意味着“动画完成后我应该调用什么函数？”

[1] 是的，是的，Opera，是的，是的——那是例外

于 2012-09-18T17:24:57.693 回答
0

在这里，修复了您的代码：http: //jsfiddle.net/RASG/AK9kZ/

每次按下enter它都会切换div.

请注意，有更好的方法可以做到这一点。

我只是重用了你的代码。

嗯 多伊斯

于 2012-09-18T17:33:12.103 回答