一定の時間が経過した後にフォントの色を変更する

Question

Web上にテキストを配置して、色を変更したり、元の色に戻したりします（約2秒）。

JavaScriptを使用しても可能ですか？

jQueryのあなたは、このような何かを行うことができますして

Answer 1

（JSFiddle here）

HTML：

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

JS：

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

編集：フルJSFiddle例here

JS：

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

Answer 2

は、この機能を使って、あなたのテキストにonmouseout="timedFunction()"を追加します。ここでは

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

Answer 3

は、setTimeoutメソッドを使用して実施例です。

css： .text { color：red; } .text.hover { 色：黄色; }

の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です：

Answer 4

機能のこの種のsetTimeoutのまたはJavaScriptの他の種類を介さず、利用可能な場合CSS3によって提供されるべきです。だから、あなたは、IEのために以前に提案Javascriptのソリューションのいずれかを選択しますと仮定すると、単に純粋なCSS3のソリューションがあなたのために許容され

<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; 
}