<html>
<head>
<title>SetTimeout</title>
<style type="text/css">
div{
    height:200px;
    width:600px;
    background-color:#CCCCCC;
}
#test1
{
    background:#99CC00;
    position:fixed;
    left:300px;
border:1px solid red;
    filter:alpha(opacity=0);
}
</style>
</head>
<body>
<h2>Great Web resources</h2>  
<div id="test1"></div>
<button onclick="doSome()">测试</button>
<script language="javascript">
function $(id)
{
    return document.getElementById(id);
}
function doSome()
{
    this.fadeIn($("test1"));
}function setOpacity(obj,value)
{
    //debugger;
//alert(value);
    if(obj.filters)    
    {
        obj.style.filter='alpha(opacity='+value+')';
    }
    else{
        obj.style.opacity=value/100;
    }
if(value==100){
fadeOut(obj);
//alert("hah");
}
}function fadeIn(obj)
{
    for(var i=0;i<=100;i+=2)
    {
        (function(){
            var pos=i;
            setTimeout(function(){setOpacity(obj,pos);},(pos+1)*10);
        }
        )();
//if(i==100){
// fadeOut(obj);
//}
    }
}
function fadeOut(obj)
{
    for(var i=98;i>=0;i-=2)
    {
//alert(Math.abs((i-98)));
        (function(){
            var pos=i;
            setTimeout(function(){setOpacity(obj,pos);},Math.abs((pos-98))*10);
        }
        )();
//if(i==0){
// fadeIn(obj);
//}
    }
}
</script>
</body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <title>SetTimeout</title>
    <style type="text/css">
    div{
        height:200px;
        width:600px;
        background-color:#CCCCCC;
    }
    #test1
    {
        background:#99CC00;
        position:fixed;
        left:300px;
        border:1px solid red;
        filter:alpha(opacity=0);
    }
    </style>
    </head>
    <body>
    <h2>Great Web resources</h2>  
    <div id="test1"></div>
    <button onclick="doSome()">测试</button>
    <script language="javascript">
    function $(id)
    {
        return document.getElementById(id);
    }
    function doSome()
    {
        this.fadeIn($("test1"));
    }function setOpacity(obj,value)
    {
        //debugger;
        //alert(value);
        if(obj.filters)    
        {
            obj.style.filter='alpha(opacity='+value+')';
        }
        else{
            obj.style.opacity=value/100;
        }
        if(value==100){
            fadeOut(obj);
            //alert("hah");
        }
    }function fadeIn(obj)
    {
        for(var i=0;i<=100;i+=2)
        {
            (function(){
                var pos=i;
                setTimeout(function(){setOpacity(obj,pos);},(pos+1)*10);
            }
            )();
            //if(i==100){
            //    fadeOut(obj);
            //}
        }
    }
    function fadeOut(obj)
    {
        for(var i=98;i>=0;i-=2)
        {
            //alert(Math.abs((i-98)));
            (function(){
                var pos=i;
                setTimeout(function(){setOpacity(obj,pos);},Math.abs((pos-98))*10);
            }
            )();
            //if(i==0){
            //    fadeIn(obj);
            //}
        }
        setTimeout(function(){fadeIn(obj);},Math.abs((99))*10);
    }
    </script>
    </body>
    </html>
      

  2.   

    var pos=i;
    这个变量定义与不定义,有什么区别?
      

  3.   

    <html>
    <head>
    <title>SetTimeout</title>
    <style type="text/css">
    div{
        height:200px;
        width:600px;
        background-color:#CCCCCC;
    }
    #test1
    {
        background:#99CC00;
        position:fixed;
        left:300px;
        border:1px solid red;
        filter:alpha(opacity=0);
    }
    </style>
    </head>
    <body>
    <h2>Great Web resources</h2>  
    <div id="test1"></div>
    <button onclick="doSome()">测试</button>
    <script language="javascript">
    function $(id)
    {
        return document.getElementById(id);
        setTimeout(doSome,3000)
    }
    function doSome()
    {
        this.fadeIn($("test1"));
    }function setOpacity(obj,value)
    {
        //debugger;
        //alert(value);
        if(obj.filters)    
        {
            obj.style.filter='alpha(opacity='+value+')';
        }
        else{
            obj.style.opacity=value/100;
        }
        if(value==100){
            fadeOut(obj);
            //alert("hah");
        }
    }function fadeIn(obj)
    {
        for(var i=0;i<=100;i+=2)
        {
            (function(){
                var pos=i;
                setTimeout(function(){setOpacity(obj,pos);},(pos+1)*10);
            }
            )();
            //if(i==100){
            //    fadeOut(obj);
            //}
        }
    }
    function fadeOut(obj)
    {
        for(var i=98;i>=0;i-=2)
        {
            //alert(Math.abs((i-98)));
            (function(){
                var pos=i;
                setTimeout(function(){setOpacity(obj,pos);},Math.abs((pos-98))*10);
            }
            )();
            //if(i==0){
            //    fadeIn(obj);
            //}
        }
    }
    </script>
    </body>
    </html>
      

  4.   

    <html>
    <head>
    <title>SetTimeout</title>
    <style type="text/css">
    div{
      height:200px;
      width:600px;
      background-color:#CCCCCC;
    }
    #test1
    {
      background:#99CC00;
      position:fixed;
      left:300px;
      border:1px solid red;
      filter:alpha(opacity=0);
    }
    </style>
    </head>
    <body>
    <h2>Great Web resources</h2>  
    <div id="test1"></div>
    <button onclick="doSome()">测试</button>
    <script language="javascript">
    function $(id)
    {
      return document.getElementById(id);
    }
    function doSome()
    {
      this.fadeIn($("test1"));
    setTimeout(doSome,3000)//刚才加错地方了
    }function setOpacity(obj,value)
    {
      //debugger;
      //alert(value);
      if(obj.filters)  
      {
      obj.style.filter='alpha(opacity='+value+')';
      }
      else{
      obj.style.opacity=value/100;
      }
      if(value==100){
      fadeOut(obj);
      //alert("hah");
      }
    }function fadeIn(obj)
    {
      for(var i=0;i<=100;i+=2)
      {
      (function(){
      var pos=i;
      setTimeout(function(){setOpacity(obj,pos);},(pos+1)*10);
      }
      )();
      //if(i==100){
      // fadeOut(obj);
      //}
      }
    }
    function fadeOut(obj)
    {
      for(var i=98;i>=0;i-=2)
      {
      //alert(Math.abs((i-98)));
      (function(){
      var pos=i;
      setTimeout(function(){setOpacity(obj,pos);},Math.abs((pos-98))*10);
      }
      )();
      //if(i==0){
      // fadeIn(obj);
      //}
      }
    }
    </script>
    </body>
    </html>
      

  5.   

    var pos=i;
    这个变量定义与不定义,有什么区别?
      

  6.   

    pos后面要用 你不定义怎么用?
      

  7.   

    如果去掉pos变量的定义就没有了淡入淡出的效果。