褪色輸入邊框onclick

我需要一些幫助，我認爲是一些簡單的JavaScript/jQuery。我真的不在乎使用哪一個，但這是我想要實現的。當有人點擊搜索欄時，id ='search'，我想要邊框search.style.border ='1px solid＃4F94CD';在一秒左右的時間內在搜索欄周圍淡入。謝謝您的幫助！褪色輸入邊框onclick

<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()'/>

來源

2011-12-04 Eggo

如果你不關心淡入IE無法正常工作（顏色也只是瞬間改變，而不是褪色），你可以完全拋棄了JavaScript和使用CSS轉換：

#search { 
    -moz-transition: all 1s linear; 
    -webkit-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    transition: all 1s linear; 
} 

#search:focus { 
    border: 1px solid #4F94CD; 
}

來源

2011-12-04 17:51:59

這工作完美，非常感謝你！ – Eggo

也許像這樣FIDDLE會做到這一點。使用jQuery UI來動畫顏色。

如果您試圖在可見/隱藏的情況下爲邊框設置動畫效果，而不隱藏整個搜索字段，那麼可以通過將邊框放置在單獨的元素上來做到這一點，並且在不需要jQuery UI的情況下爲該元素的不透明度設置動畫效果。

來源

2011-12-04 18:21:34 adeneo

值得注意的是，您不需要整個jQuery UI包，只需要擴展原始'animate' jQuery函數的「效果核心」功能即可。 – Minkiele

非常感謝。 – Eggo

褪色輸入邊框onclick

回答

相關問題