Question

我需要一些帮助，我认为是一些简单的javascript / jquery。我真的不在乎使用哪一个，但这是我想要发生的事情。当有人点击搜索栏时，id ='search'，我想要边框search.style.border ='1px solid＃4F94CD';在一秒左右的时间内在搜索栏周围淡入淡出。谢谢你的帮助！

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

Answer 1

如果你不关心在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;
}

Answer 2

也许这样的FIDDLE会做到这一点。使用jQuery UI为颜色设置动画。

如果您尝试从可见/隐藏动画边框，而不隐藏整个搜索字段，则可以通过将边框放在单独的元素上来实现，并在不需要jQuery UI的情况下为该元素的不透明度设置动画。

点击输入边框点击

2 个答案: