如何使用animate方法给div加动画效果
【如何使用animate方法给div加动画效果】新建一个html页面 ， 定名为test.html ， 并在页面头部加载jquery.min.js库文件 ， 用于利用animate方式给div加动画结果 。
文章插图
2在test.html页面 ， 利用button标签建立一个名称为“起头动画”的按钮 ， 用于点击起头展示动画结果 。
文章插图
3在test.html页面 ， 利用div建立一个长宽都为100px的正方形 ， 并给它设置布景颜色 ， 出格需要注重的是div要设置position属性 ， 这是实现动画结果的前提 。
文章插图
4编写js代码 ， 给button按钮绑定点击事务 ， 当按钮被点击时 ， 执行function()函数来实现动画结果 。
文章插图
5在js里 ， 获得div对象并绑定实现动画的方式animate(),下面将设置其属性实现动画结果 。
文章插图
6经由过程animate()方式的属性设置动画结果 ， 当点击“起头动画”按钮后 ， 实现“div标的目的右移动250px ， 长宽扩大为150px ， 透明度为0.5”的结果 。
文章插图
7在浏览器打开test.html页面 ， 点击“起头动画”按钮 ， 查看实现的动画结果 。
文章插图
文章插图
以上内容就是如何使用animate方法给div加动画效果的内容啦 ， 希望对你有所帮助哦！
推荐阅读
- 学信网如何查询高考成绩
- 支付宝如何0元免费办理ETC服务
- 搬家了宽带如何迁过去
- 如何使用append方法动态追加多个元素
- 如何替换穿越火线CF击杀图标
- 如何快速画一只二哈
- 如何在word中使用书签
- 泡沫染发剂的使用方法
- 如何炖羊肉汤更鲜美并且羊肉汤会变白
- 如何使用JS设置canvas的颜色、样式和阴影