移动和渐变特效的jQuery实现

先看代码：

复制代码代码如下所示：

















体{ font-family:微软雅黑；宽度：980px；保证金：0汽车；文本对齐：中心；}

箱{。

宽度：300px；

身高：300px；

背景：绿色；

边境：1px solid # e6e6e6；

Margintop：50px；

行高：200px；

位置：绝对；

}

按钮{

边界：无；

背景：绿色；

宽度：100px；

身高：50px；

行高：50px；

颜色：# FFF；

字体大小：16px；

边距：50px；

}





单击启动动画





$（文档）Ready（函数（）{）

$（按钮）。Click（函数（）{）

var；

div.animate（{身高：'200px '，不透明度：'0.4}，慢）；

div.animate（{宽度：'200px '，不透明度：'0.8}，慢）；

div.animate（{身高：'100px '，不透明度：'0.4}，慢）；

div.animate（{宽度：'100px '，不透明度：'0.8}，慢）；

div.animate（{右：'100px '，不透明度：'0.8}，慢）；

div.animate（{底：'100px '，不透明度：'0.8}，慢）；

div.animate（{左：'100px '，不透明度：'0.8}，慢）；

div.animate（{顶：'100px '，不透明度：'0.8}，慢）；

}）；

}）；





$（文档）Ready（函数（）{）

$（按钮）。Click（函数（）{）

var；

div.animate（{身高：'300px '，不透明度：'0.4}，慢）；

div.animate（{宽度：'300px '，不透明度：'0.8}，慢）；

div.animate（{身高：'100px '，不透明度：'0.4}，慢）；

div.animate（{宽度：'100px '，不透明度：'0.8}，慢）；

}）；

}）；

}）；









动画事件是一个新事物，解释是，div已经成为一个灵魂可以移动的东西。

提示:

单击1的单击节点，单击事件

2，选择需要通过var控制的CSS属性（ ）

剩下的部分必须依靠你自己去敲代码，看看效果如何去理解代码的含义。