Question

我试图创建一个首先呈现几乎不可见的<p>，然后在鼠标悬停＆＃39;变得可见，并逐渐增加大小，最终1em。然后在＆＃39; mouseout＆＃39;恢复到原始设置。对于延迟，我使用从this(stackoverflow)回答引用的sleep（）函数（效果很好，谢谢）。

发生的事情是，虽然增量工作正常，但<p>在循环结束前不会出现。突然间，而不是整个过程，我不确定为什么......“鼠标移动”＃39;活动工作正常。在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);

Answer 2

纯 CSS3 ：

＆＃13;

#Test{
  border: 1px solid red;
  
  background: rgba(0, 0, 0, 0.0);
  color: rgba(100, 0, 0, 0.2);
  font-size:0.2em;
  transition: all 2s ease-in-out 3s; /* 3s is the mouseleave delay */
}
#Test:hover{
  background: rgba(0, 0, 100, 0.6);
  color: rgba(100, 0, 0, 1);
  font-size: 1em;
  transition-delay: 0s; /* 0s delay on mouseenter */
}

＆＃13;

 <div id="Test">Hello world</div>

＆＃13;

P.S：

而不是嵌套.css().css()使用对象表示法：

.css({
      background : "rgba(0, 0, 0, 0.0)",
      color      : "rgba(100, 0, 0, 0.2)",
      font-size  : "0.2em"
})

Answer 3

[已解决]我已经使用.animate()和setTimeout()达到了解决方案，达到了我想要的效果。 <p>出现在＆＃39; mouseover＆＃39;缩放到1em然后在5秒后消失。我删除了'mouseout＆＃39;事件已过时。感谢大家的反馈，我现在在JS和CSS3带上有几个新工具。

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

var Test_MouseOver = function (event) {
    var DelayInterval, RestoreInterval;
    DelayInterval = 2000;
    RestoreInterval = 5000;

    $('#test').css({
        color       :   'rgba(100, 0, 0, 1)'
    });

    $('#test').animate({ 
        'font-size' :   '1em' },
        DelayInterval
    );

    setTimeout(Restore_Settings, RestoreInterval);
};

由于这是我的第一个问题，我不确定将[解决]答案发布到我自己的问题是否是不好的做法。请告诉我，如果是的话。感谢。

通过“鼠标悬停”延迟循环增加（+）文本大小＆＃39;

3 个答案: