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

I need to implement a simple .fadeIn with javascript

本文关键字：一个 简单 fadein javascript 实现      更新时间：2023-09-26

我正在努力实现，我认为这将是一个相当简单的淡出使用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，并不能弄清楚这一点。我认为这很简单，但我需要任何我能得到的帮助。谢谢!

既然你已经用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作为字符串传递，您将真正想要传递函数。而不是引用你的dom元素的id在你的脚本中，你会想把它们下拉使用document.getElementById 

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

关于为什么将字符串传递给setTimeout不好的简要解释，请查看这里。简短的版本是字符串以类似于eval

的方式在全局范围内运行。

setTimeout接受这样一个函数，因此您的代码将使用这个函数:

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

或者，如果你想用javascript做一个实际的淡出，你可以使用jQuery(你已经标记的问题和对象有id="searchresults"，你可以使用这个jQuery:

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

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

你也可以这样做:

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

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

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

下面是一个示例http://jsfiddle.net/rXJD4/

相关文章：