jQuery插件之----缓冲运动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery插件</title>
<script type="text/javascript" src="images/jquery-2.0.3.js"></script>

<script>

(function($){

   $.fn.moveHc=function(json)
   {
       var i=0;

       for(i=0;i<this.length;i++)//重要
       {
           startMove(this[i], json);
       }

       function getStyle(obj, attr)
       {
           if(obj.currentStyle)
           {
               return obj.currentStyle[attr];
           }
           else
           {
               return getComputedStyle(obj, false)[attr];
           }
       }

       function startMove(obj, json, fn)
       {
           clearInterval(obj.timer);
           obj.timer=setInterval(function (){
               var bStop=true;       //这一次运动就结束了——所有的值都到达了
               for(var attr in json)
               {
                   //1.取当前的值
                   var iCur=0;

                   if(attr=='opacity')
                   {
                       iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
                   }
                   else
                   {
                       iCur=parseInt(getStyle(obj, attr));
                   }

                   //2.算速度
                   var iSpeed=(json[attr]-iCur)/8;
                   iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);

                   //3.检测停止
                   if(iCur!=json[attr])
                   {
                       bStop=false;
                   }

                   if(attr=='opacity')
                   {
                       obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                       obj.style.opacity=(iCur+iSpeed)/100;
                   }
                   else
                   {
                       obj.style[attr]=iCur+iSpeed+'px';
                   }
               }

               if(bStop)
               {
                   clearInterval(obj.timer);

                   if(fn)
                   {
                       fn();
                   }
               }
           }, 30)
       }




}})(jQuery)

$(function(){

      var oDiv=$('div');


   oDiv.click(function(){


       oDiv.eq($(this).index()).moveHc({width:200,height:200,opacity:100})

       /*oDiv.eq($(this).index()).moveHc({width:100,height:100,opacity:100}).siblings().moveHc({width:50,height:55,opacity:50}) */ //siblings()在插件里不能用。用就出问题


/*       oDiv.eq($(this).index()).animate({width:100,height:100,opacity:1}).siblings().animate({width:50,height:55,opacity:0.5})
*/

       })




   })

</script>

<style>

   #zgz{ width:50px; opacity:0.5; height:55px; background:#f00; margin:10px; float:left;}

</style>

</head>

<body>

<div id="zgz"></div>
<div id="zgz"></div>
<div id="zgz"></div>
<div id="zgz"></div>

</body>
</html>

jQuery插件之----缓冲运动

推荐阅读