大家看看，我想让它速度慢点！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
        #winpop
        {
            width: 200px;
            height: 0px;
            position: absolute;
            right: 0;
            bottom: 0px;
            border: 1px solid #99999;
            margin: 0px;
            padding: 1px;
            overflow: hidden;
            background: #fff;
            display: none;
        }
        div.title
        {
            width: 100%;
            height: 20px;
            line-height: 20px;
            background: #290052;
            font-weight: bold;
            text-align: center;
            font-size: 12px;
            color: #fff;
        }
        div.content
        {
            width: 100%;
            height: 80px;
            line-height: 80px;
            font-weight: bold;
            font-size: 12px;
            color: #ff0000;
            text-decoration: underline;
            text-align: center;
            border: 1px solid #290052;
        }
        .close
        {
            position: absolute;
            right: 4px;
            top: -1px;
            color: #fff;
            cursor: pointer;
        }
        #glide
        {
            background: yellow;
            border: 1px solid blue;
            display: none;
        }
    </style>    <script language="javascript" type="text/javascript">
        var MsgPop;
        var popH;
        var oDiv;
        var oDivW;
        var oDivH;
        window.onload = function () {
            MsgPop = document.getElementById("winpop");
            MsgPop.style.height = "0px";            tips_pop();

          /*  setTimeout("tips_pop()", 5000);*/
  setInterval("tips_pop()", 5000);
        }
        function tips_pop() {
            popH = parseInt(MsgPop.style.height);
            if (popH == 0) {
                MsgPop.style.display = "block";
                show =setInterval("changeH('up')", 2);
            }
            else {
                hide = setInterval("changeH('down')", 2);
            }
        }
        function changeH(str) {
            popH = parseInt(MsgPop.style.height);
            if (str=="up") {
                if (popH <= 100) {
                    MsgPop.style.height = (popH + 4).toString() + "px";
                }
                else {
                    clearInterval(show);
                }
            }
            if (str == "down") {
                if (popH >= 4) {
                    MsgPop.style.height = (popH -4).toString() + "px";
                }
                else {
                    clearInterval(hide);
                    MsgPop.style.display = "none";
                }
            }
        }
    </script></head>
<body>
    <div id="winpop">
        <div class="title">
            短消息<span class="close" onclick="tips_pop()">X</span>
        </div>
        <div class="content">
            未读消息(3)</div>
    </div>
</body>
</html>
以上是在右下角弹出的消息框，每隔一段时间就会弹一次，我觉得他出现和消失的速度太快了，我想让他慢慢的出来，退出或点关闭的时候在慢慢的消失。大家帮忙改改吧！

解决方案 »

  1.   

    show =setInterval("changeH('up')", 2);
    这个值设大一点
      

  2.   

    setInterval("tips_pop()", 5000);
    把这个方法里面的5000 改大一点。  这个单位是毫秒
      

  3.   

    setInterval函数内时间为毫秒，可尝试改大一些
      

  4.   

    show =setInterval("changeH('up')", 30);//变成30较好看。
    楼主，你的css 布局好利害啊，向你学习，
    不知楼主有没有 类似的源码，想开开看界。
      

  5.   

    function tips_pop(){
      var MsgPop=document.getElementById("winpop");
      var popH=parseInt(MsgPop.style.height);//将对象的高度转化为数字
       if (popH==0){
       MsgPop.style.display="block";//显示隐藏的窗口
      show=setInterval("changeH('up')",2);
       }
      else { 
       hide=setInterval("changeH('down')",2);
      }
    }function changeH(str) {
     var MsgPop=document.getElementById("winpop");
     var popH=parseInt(MsgPop.style.height);
     if(str=="up"){
      if (popH<=180){
      MsgPop.style.height=(popH+4).toString()+"px";
      }
      else{
      clearInterval(show);
      }
     }
     if(str=="down"){ 
      if (popH>=4){  
      MsgPop.style.height=(popH-4).toString()+"px";
      }
      else{ 
      clearInterval(hide);   
      MsgPop.style.display="none";  //隐藏DIV
      }
     }
      

  6.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html xmlns="http://www.w3.org/1999/xhtml"><head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>无标题文档</title>
      <style type="text/css">
      #winpop
      {
      width: 200px;
      height: 0px;
      position: absolute;
      right: 0;
      bottom: 0px;
      border: 1px solid #99999;
      margin: 0px;
      padding: 1px;
      overflow: hidden;
      background: #fff;
      display: none;
      }
      div.title
      {
      width: 100%;
      height: 20px;
      line-height: 20px;
      background: #290052;
      font-weight: bold;
      text-align: center;
      font-size: 12px;
      color: #fff;
      }
      div.content
      {
      width: 100%;
      height: 80px;
      line-height: 80px;
      font-weight: bold;
      font-size: 12px;
      color: #ff0000;
      text-decoration: underline;
      text-align: center;
      border: 1px solid #290052;
      }
      .close
      {
      position: absolute;
      right: 4px;
      top: -1px;
      color: #fff;
      cursor: pointer;
      }
      #glide
      {
      background: yellow;
      border: 1px solid blue;
      display: none;
      }
      </style>  <script language="javascript" type="text/javascript">
      var MsgPop;
      var popH;
      var oDiv;
      var oDivW;
      var oDivH;
      window.onload = function () {
      MsgPop = document.getElementById("winpop");
      MsgPop.style.height = "0px";  tips_pop();  /* setTimeout("tips_pop()", 5000);*/
    setInterval("tips_pop()", 5000);
      }
      function tips_pop() {
      popH = parseInt(MsgPop.style.height);
      if (popH == 0) {
      MsgPop.style.display = "block";
      show =setInterval("changeH('up')", 20);
      }
      else {
      hide = setInterval("changeH('down')", 20);
      }
      }
      function changeH(str) {
      popH = parseInt(MsgPop.style.height);
      if (str=="up") {
      if (popH <= 100) {
      MsgPop.style.height = (popH + 1).toString() + "px";
      }
      else {
      clearInterval(show);
      }
      }
      if (str == "down") {
      if (popH >= 1) {
      MsgPop.style.height = (popH -1).toString() + "px";
      }
      else {
      clearInterval(hide);
      MsgPop.style.display = "none";
      }
      }
      }
      </script></head>
    <body>
      <div id="winpop">
      <div class="title">
      短消息<span class="close" onclick="tips_pop()">X</span>
      </div>
      <div class="content">
      未读消息(3)</div>
      </div>
    </body>
    </html>