javascript - 一定時間後にフォントの色を変更する

Question

Webサイトにテキストを配置して、マウスオーバーの色を変更し、しばらく（たとえば2秒）遅れて元のマウスアウトの色に戻すようにします。

JavaScriptを使用してそれを行うことは可能ですか？

Answer 1

jQueryを使用すると、次のようなことができます（JSFiddleはこちら）

HTML：

<a id='v1'>Hello</a>​

JS：

​setTimeout(function() {
    $('#v1').css('color','#777');
}​,2000);​

編集：完全なJSFiddleの例はこちら

JS：

$('#v1').hover(function() {
     $(this).css('color','#777');   
}, function() {
    setTimeout(function() {
        $('#v1').css('color','#000');
     },2000);
});

</ p>

Answer 2

この種の機能は、setTimeout やその他の種類の JavaScript を使用せずに、可能な場合は CSS3 で提供する必要があります。したがって、以前に提案された IE 用の Javascript ソリューションの 1 つを選択すると仮定すると、この CSS を他のすべての最新ブラウザーに使用するだけです。

html/css

<span>hover me</span>

span {
    color : green;
    -webkit-transition : color 2s linear;
    -msie-transition : color 2s linear;
    -moz-transition : color 2s linear;
    -o-transition : color 2s linear;
    transition : color 2s linear;
}

span:hover {
    color : red;
}

Answer 3

この関数を使用して、テキストに追加onmouseout="timedFunction()"します。

function timedFunction{    
    var timeout = setTimeout("changeColor()",timeInMilliseconds);
}

Answer 4

以下は、setTimeout を使用した実際の例です。

css: .text { 色: 赤; } .text.hover { color: yellow; }

JavaScript:

var timeoutId = null;
$(".text").hover(function() {
    if (timeoutId != null) {
        clearTimeout(timeoutId);
        timeoutId = null;
    }
    $(this).addClass("hover");
}, function () {
    var $element = $(this);
    timeoutId = setTimeout(function() {
        $element.removeClass("hover");
    }, 500);
});​

そして、ここに jsfiddle があります: http://jsfiddle.net/9TJfD/8/