jquery 怎么做渐入渐出效果???!!!

 我知道jquery中fadeIn和fadeOut
 可是要怎样才能在两张图之间切换的时候没有空白呢？
 而是从一张很自然的切换到第二张

解决方案 »

  1.   


    <script language="javascript" type="text/javascript">
        //关闭方法
        function closewin() {
            //关闭层和清除文本参数
            $("#openid").hide(300);
            $("#shutid").hide(100);
            $("#linkfiledown").css("display", "none");
        }    var posX;
        var posY;
        var popDiv;
        var dragable;
        //鼠标按下事件
        function down(e, openid) {
            popDiv = document.getElementById(openid);
            popDiv.style.cursor = "move";
            e = e || window.event; //如果是IE  活着  
            posX = e.clientX - parseInt(popDiv.style.left);
            posY = e.clientY - parseInt(popDiv.style.top);
            dragable = true;
            document.onmousemove = move;
        }
        //鼠标移动事件
        function move(ev) {
            if (dragable == true) {
                ev = ev || window.event; //如果是IE   
                popDiv.style.left = (ev.clientX - posX) + "px";
                popDiv.style.top = (ev.clientY - posY) + "px";
            }
        }
        //鼠标抬起事件
        function up() {
            dragable = false;
            popDiv.style.cursor = "default";
        }    //创建模态层
        function HoutDiv() {        //先要移除模态层
            $("#shutid").remove();
            //创建模态层添加属性  
            var div = document.createElement("div");
            div.setAttribute("id", "shutid");
            document.body.appendChild(div);
            $("#shutid").css({ position: "absolute", left: "0px", top: "0px", background: "#CCCCCC" });
            document.getElementById("shutid").style.filter = "Alpha(opacity=60)";
            document.getElementById("shutid").style.opacity = "0.6";
            //添加模态层宽高
            $("#shutid").css("width", $(document).width());
            $("#shutid").css("height", $(document).height());
            //层的级别
            $("#shutid").css("z-index", "1");
        }    //打开浮动层
        function updatelink(linkid, linkname, linkaddress, linkorder, linktype, imglink) {
            debugger;
            $("#openid").show(300);
            //层的级别最高
            $("#openid").css("z-index", "2");
            HoutDiv(); //调用遮罩层        $("#linkname").val(linkname);
            $("#linkaddress").val(linkaddress);
            $("#linkorder").val(linkorder);
            $("#linktype").val(linktype);
            $("#imglink").text(imglink);
            $("#linkid").val(linkid);
        }
    </script>希望能看懂
      

  2.   

    http://hi.baidu.com/yangbingqi155/blog/item/15c1f7b2eafccbabd8335a13.html
      

  3.   


    <%@ page language="java" pageEncoding="utf-8"%>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script language="JavaScript" type="text/javascript" src="jslib/jquery-1.4.2.js"></script>
    <script language="JavaScript" type="text/javascript">
    $(function(){
    var imgs = $("img");
    imgs.hide();
    $("#img1").fadeIn();
    var count=1
    imgs.click(function(){
    count++;
    $(this).fadeOut(3000).end();
    if(count>imgs.length){
    count=1;
    }
    $("#img"+count).fadeIn(3000).end();

    })
    })
    </script>
      </head>
      <style>
       img{
       float:left;
    position:absolute;;
       }
      </style>
      <body> 
      <div>
       <img id="img1" src="imgs/01.jpg" width="300px" height="300px">
    <img id="img2" src="imgs/02.jpg" width="300px" height="300px">
    <img id="img3" src="imgs/03.jpg" width="300px" height="300px">
      </div>
      </body>
    </html>