Question

我正在尝试慢慢增加网页上文字的字体大小。我所使用的代码确实有效，但是在循环的每次迭代之后，新的HTML / CSS都不会呈现，并且只有在完成所有内容时才会显示100px大小的文本。为了使文本看起来像是慢慢放大，我需要这样做。 javascript在下面，因为它是从一个单独的文件中使用的。这就是我所拥有的......

<p class="game-title" style="font-size:50px">Test</p>

function sleep(milliseconds) {
    var start = new Date().getTime();
    for (var i = 0; i < 1e7; i++) {
        if ((new Date().getTime() - start) > milliseconds) {
            break;
        }
    }
}

function increaseSize() {
    $('.game-title').css('font-size', parseInt($('.game-title').css('font-size')) + 1 +          "px");
}

        while (parseInt($('#text').css('font-size')) <= 100){
            sleep(1000);
            increaseSize();
        }

Answer 1

使用CSS（示例http://jsfiddle.net/X3crE/2/）：

<p class="game-title">Test</p>
<style>
.game-title { font-size:50px; transition: 2s; }
.game-title.large { font-size: 100px; }
</style>
$('.game-title').addClass('large');

使用jQuery（示例http://jsfiddle.net/X3crE/）：

$('.game-title').animate({'font-size':'100px'},2000);

Answer 2

你需要异步进行。 Demo

function increaseSize() {
    var title = $('.game-title'),
        size = parseInt(title.css('font-size'))

    title.css('font-size', '+=1');
    if(size < 100) {
        setTimeout(increaseSize, 1000);
    }            
}

并且plz 从不阻止主UI线程。

Answer 3

这是因为您阻止浏览器在sleep方法中呈现。浏览器是单线程的，除了你正在使用webworkers，这个单线程也负责渲染。您可以看到结果，因为您正在阻止浏览器使用您的睡眠方法进行渲染。

尝试创建类似的东西：

var size = 10, big = 20, step = 1;

function setFontSize(s) {
    /*code to resize*/
}

function increase () {
 if (size < big) {
    setFontSize(size);
    size += step;
    window.setTimeout(increase, 1000);
 }
}

increase();

在循环中每次迭代后渲染HTML

3 个答案: