我需要實現一個簡單的.fadeIn與javascript

我想實現，我認爲將是一個相當簡單的淡入淡出使用JavaScript，但我只是無法讓它工作。我需要實現一個簡單的.fadeIn與javascript

下面是代碼：

<script> 
function changeborder() 
{ 
    search.style.border = '1px solid #4F94CD'; 
} 
</script> 
<div align='center'> 
<div id='top'> 
<div style="width:982px;"> 
    <div id="floatleft"><a href="http://www.pearlsquirrel.com"><img src="pearlsquirrel.jpg"/></a></div> 
     <div id="floatleftsearch"> 
     <div style="margin-top:14px; height:36px;"><form action='searchmusic.php' method='GET' autocomplete="off"><input type='text' name='search' id='search' class='search' value="Search..." onClick="changeborder(); searchresults.style.visibility = 'visible';" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue; this.style.border = '1px solid #5E5E5E'; hidediv();" onkeyup='searchmusic()'/>

我的目標是讓這片以淡入

function changeborder() 
{ 
search.style.border = '1px solid #4F94CD'; 
}

不過，我已經嘗試了一切，我知道，這是不是太多關於JavaScript和無法弄清楚這一點。我認爲這很簡單，但我需要任何幫助。謝謝！

來源

2011-12-04 Eggo

由於您使用jQuery進行了標記，爲什麼不使用jQuery fadeIn函數呢？

$("#searchresults").fadeIn(200);

請注意，如果您希望當淡出完成時得到通知，你可以傳遞一個回調

$("#searchresults").fadeIn(200, function() { changeborder(); });

此外，您的原始代碼的幾句話。

setTimeout("searchresults.style.visibility = 'hidden'", 200);

將簡單地等待200ms，然後隱藏名爲searchresults的元素。要實際淡入淡出，您需要使用上面的fadeIn函數。

而在未來，而不是類似的代碼

setTimeout("searchresults.style.visibility = 'hidden'", 200);

其傳遞JavaScript以超時作爲串後運行，你會真正想傳遞一個功能。而不是在你的腳本由ID參照，你的DOM元素，你會想拉下來使用document.getElementById

setTimeout(function() { 
    var el = document.getElementById("searchresults"); 
    el.style.visibility = 'hidden'; 
}, 200);

有關爲何傳遞一個字符串的setTimeout是壞的簡要說明，看看here 。簡短的版本是，字符串在以類似的方式在全球範圍內運行eval

來源

2011-12-04 16:30:30

嗯，我上面說我缺乏與這兩種功能的知識。我標記jQuery是因爲我認爲它可能與兩者兼而有之。我會用任何能解決問題的東西，對於缺乏解釋感到抱歉。 – Eggo

對不起，這可能聽起來像一個愚蠢的問題，但如果我使用它，我在哪裏說search.style.border ='1px solid＃4F94CD'; – Eggo

哦，非常感謝你，我真的很感激你知道！ – Eggo

看一看http://api.jquery.com/fadeIn/

Ex : $("#yourDivId").fadeIn(500)

下面是一個簡單http://jsfiddle.net/rXJD4/

來源

2011-12-04 16:32:12 Shyju

的setTimeout需要這樣的函數，所以你的代碼將與此工作：

setTimeout(function() {searchresults.style.visibility = 'hidden'}, 200);

或者，如果你想用javascript做一個實際的淡出，你可以我們Ë的jQuery（你加了標籤的問題，與和對象有id="searchresults"，你可以使用這個jQuery的：

$("#searchresults").delay(200).fadeIn(500);

這將爲200毫秒延遲（如您的setTimeout語句，然後淡入超過500毫秒的持續時間）。

來源

2011-12-04 16:32:48 jfriend00

或者，你可以做這樣的事情：

var el = document.getElementById("searchresults"); 
el.style.opacity = 0; 
el.style.visibility = "visible"; 
for(var i = 0; i < 100; i++) 
{ 
    setTimeout(function(){ 
    el.style.opacity = 0.01 * i; 
    }, 200 + i); 
}

來源

2011-12-04 16:33:57 KeatsKelleher

我需要實現一個簡單的.fadeIn與javascript

回答

相關問題