javascript - 通过 'mouseover' 上的延迟循环增加 (+) 文本大小

Question

我正在尝试创建一个 <p>首先呈现几乎不可见，然后在“鼠标悬停”上变得可见并逐渐增加大小，最后达到 1em。然后在 'mouseout' 上恢复到其原始设置。对于延迟，我使用了引用自 this(stackoverflow) 的 sleep() 函数回答(效果很好，谢谢)。

发生的事情是，虽然增量工作正常，但 <p>直到循环结束才出现。突然之间，而不是整个过程，我不确定为什么......'mouseout' 事件运行良好。在 OS X 10.9 上的 firefox、chrome 和 safari 中进行了测试，这三者都相同。

/*jslint browser: true*/
/*global $, jQuery, alert*/

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

var Test_MouseOver = function (event) {
    var i, text_size;

    $('#Test').css('background', 'rgba(0, 0, 100, 0.6)').css('color', 'rgba(100, 0, 0, 1)');

    for (i = 0.2; i <= 1; i = i + 0.1) {
        text_size = i.toString() + 'em';

        console.info('i: ' + text_size);

        $('#Test').css('font-size', text_size);

        sleep(50);
    }

    console.info('-----');
};

var Test_MouseOut = function (event) {
    $('#Test').css('background', 'rgba(0, 0, 0, 0.0)').css('color', 'rgba(100, 0, 0, 0.2)').css('font-size', '0.2em');
};

var Test = document.getElementById('Test');

Test.addEventListener('mouseover', Test_MouseOver);
Test.addEventListener('mouseout', Test_MouseOut);

Answer 1

我认为您正在寻找 setInterval

setInterval(function() {
  // do stuff every 50ms
}, 50);