jQuery实现移动 和 渐变特效的点击事件_jquery

先看代码：

复制代码 代码如下:

   
       
       
       
   

   
        点击开始动画
       

        <script> <br /> $(document).ready(function(){<br /> $("button").click(function(){<br /> var div=$(".box");<br /> div.animate({height:'200px',opacity:'0.4'},"slow");<br /> div.animate({width:'200px',opacity:'0.8'},"slow");<br /> div.animate({height:'100px',opacity:'0.4'},"slow");<br /> div.animate({width:'100px',opacity:'0.8'},"slow");<br /> div.animate({right:'100px',opacity:'0.8'},"slow");<br /> div.animate({bottom:'100px',opacity:'0.8'},"slow");<br /> div.animate({left:'100px',opacity:'0.8'},"slow");<br /> div.animate({top:'100px',opacity:'0.8'},"slow");<br /> });<br /> });<br /> </script>
        <script><br /> $(document).ready(function(){<br /> $("button").click(function(){<br /> var div=$(".box");<br /> div.animate({height:'300px',opacity:'0.4'},"slow");<br /> div.animate({width:'300px',opacity:'0.8'},"slow");<br /> div.animate({height:'100px',opacity:'0.4'},"slow");<br /> div.animate({width:'100px',opacity:'0.8'},"slow");<br /> });<br /> });<br /> });<br /> </script>
   

.animate  事件，是这个 里面的新的东西。解释起来就是  使div 块儿  变得有灵魂 可以移动。

 Tips：

1、click 事件的  点击节点的选择

2、通过 var div=$(".box")  来选择需要控制的 css 属性

剩下的就要靠 自己去敲代码，看效果 去理解其中的 意思。