当前位置: 代码迷 >> 综合 >> JQuery(30)——复杂动画
  详细解决方案

JQuery(30)——复杂动画

热度:47   发布时间:2023-10-01 17:04:14.0

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 })

  相关解决方案