JQuery(30)——复杂动画

1、animate：anmite内部设置的多个值是同步变化的，链式的animate是依次动画的。

例子：animate({ left: 0, top: 0, width: 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。

还可以指定增量，$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法。

$(“#img1”).animate({ width: 1000, height: 1000, opacity: 0 }, 3000, “swing”, function() { $(this).remove(); });animate不是阻塞调用的，因此如果需要在动画播放完成之后执行代码，则需要把代码写到第四个参数的函数中。如：不能“$().animate().remove()”。

 

2、练习：跟着鼠标飞的图片。

3、案例：Slider照片。

4、点击网页，图片飞到点击的地方；“磁力”图片。

5、QQ消息风格右下角滑动窗口。

6、JavaScript中的字典：大括号括起来的就是JavaScript中的字典，就是键值对的东西。如：

animate({ left: 0, top: 0, width: 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })