DIV向左缓动如何实现？

请使用缓动方法完成对一个DIV [id=’dialog’] 的移动过程, 从x=100, y=100 移动到 x=10, y=10，移动过程中实现透明度等于 x 值
请问用jq怎么写？
谢谢！

解决方案 »

  1.   

    一个计时器，60ms的间隔去跑，根据dialog的top和left或者其他的去判断是否到了目标位置，如果到了，清除计时器，透明度的话根据你移动的时间去做渐变，
      

  2.   


    //第一次接触HTML5的canvas元素，我自己也不是很明白，楼主自己稍微改动一下吧
    需要支持HTML5的浏览器
    <canvas id="circle"></canvas>   
    <canvas id="animate" width="200" height="200" style="border:1px solid #d3d3d3"></canvas>
    <script type="text/javascript">
    var x=100;
    var y=100;
    var c=1;
    var ctx = document.getElementById("animate").getContext("2d");
    setInterval(function(){
    c=c-0.01;
    ctx.clearRect(0,0,600,600);
    ctx.fillStyle='rgba('+'255'+','+'165'+','+'0'+','+c+')';
    ctx.beginPath();
    ctx.arc(x--,y++,10,100,Math.PI*2,true);
    ctx.closePath();
    ctx.fill();
    },50);
     </script> 
      

  3.   

    $(function() {
        $("#dialog").animate({left: "10", top: "10", opacity: '10'
    }, slow);
    });
      

  4.   

    <html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
        <script src="jquery.color.js" type="text/javascript"></script>
        <script type="text/javascript">
            //如果要实现颜色渐变，可以在 http://blog.csdn.net/yenange/article/details/8271318 取得 jquery.color.js 的代码
            $(function() {
                $("#dialog").animate(
                    {
                        left: "10", 
                        top: "10", 
                        opacity: '0.1'
                        //backgroundColor:"yellow" //颜色渐变与透明度渐变，两者只能取一种
                    }, 3000);
            }); 
        </script></head>
    <body style="background-color: Blue;">
        <div id="dialog" style="position: absolute; left: 300; top: 300px; width: 200px;
            height: 200px; background-color: Red;">
        </div>
    </body>
    </html>