Question

我正在尝试实现，我认为使用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来说并不多，而且无法解决这个问题。我认为这很简单，但我需要任何帮助。谢谢！

Answer 1

由于您已使用jQuery标记，为什么不使用jQuery fadeIn函数？

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

请注意，如果您希望在淡入完成时收到通知，则可以传递回调

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

另外，原始代码上的几句话。

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

将等待200毫秒，然后隐藏名为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

类似的方式在全局范围内运行

Answer 2

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

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

以下是http://jsfiddle.net/rXJD4/

示例

Answer 3

setTimeout采用这样的函数，因此您的代码可以使用：

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

或者，如果你想用javascript做一个真正的淡入淡出，你可以使用jQuery（你已经标记了问题并且对象有id="searchresults"，你可以使用这个jQuery：

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

这将延迟200毫秒（就像你的setTimeout语句，然后在500毫秒的持续时间内fadeIn）。

Answer 4

或者你也可以这样做：

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

我需要用javascript实现一个简单的.fadeIn

4 个答案: