位置: 编程技术 - 正文

利用jQuery的动画函数animate实现豌豆发射效果(jquery中的动画吗,是怎样用的)

编辑:rootadmin

推荐整理分享利用jQuery的动画函数animate实现豌豆发射效果(jquery中的动画吗,是怎样用的),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jqueryanimate动画,jqueryanimate动画,jquery做动画,jqueryanimate动画,jquery中常用的动画方法有哪些,jquery中常用的动画方法有哪些,你使用过jquery中的动画吗,是怎样用的,你使用过jquery中的动画吗,是怎样用的,内容如对您有帮助,希望把文章链接给更多的朋友!

先来看看效果图

豌豆射手,草坪还有子弹都是现成的图片,

1. jQuery是库还是框架?

jQuery可以说是现在最流行的一个js类库,而非框架。

之前在知乎上看到有人说了这样一句话:

You call library. Framework calls you.

我深以为然,字面意思大概就是你可以无约束地使用类库,却需要在各种限制条件下使用一个框架。

我私以为,js 库指的是直接和document文档元素交互的一个API,你可以直接引用库,让它为你服务。而框架是偏向于架构的层次,你如果想要使用框架,就必须按照它的规则来。比如angular.js,它就给你提供方法的同时还约束了dom文档结构。

拿Java的三大框架来说,也是如此,你要想使用Spring,就得按照它的步骤来,就好像一个房子,钢筋水泥已经弄好,你只需要进去装修就OK了。而库,就有点类似于StringUtils的韵味,除了它暴露出来的接口,其他你都无需关心,直接调用就行了。

2. jQuery的animate函数

animate()函数用于执行一个基于css属性的自定义动画

基本用法:

css : 你需要最终实现的样式列表

time: 过渡的时间

callback: 回调函数

animate函数的作用主要就是实现一些css样式的过渡效果。

3.引入 jQuery

比如,现在我有一个div盒子。

在上面的代码中,我们引入了百度提供的jQuery文件。

那么如何快速判断是否引入成功了呢?提供以下几个方法:

1.console.log($);

效果:

利用jQuery的动画函数animate实现豌豆发射效果(jquery中的动画吗,是怎样用的)

这说明引入成功了。

2.直接用浏览器验证

打开你的页面,按一下F,出现这样的控制台,这是浏览器自带的(我这里使用的是谷歌浏览器)。

输入$

回车!

诶,这样是不是也可以呢?

4. onmouseover事件

我们来给div盒子添加一个鼠标划上去的事件。

划上去:

嗯,最起码,这说明我们到目前为止的代码都是正确的,我初学js的时候就喜欢这样,让我感觉每一行代码都写得很放心。

5.用animate函数改变盒子宽度和高度

我们把alert去掉,加上下面的代码:

这表示当我把鼠标画上去的时候,就改变宽度为px,过渡时间为毫秒。

如果我们希望在宽度加倍后,令高度也加倍,又该如何做呢?

对了,用回调函数,当第一个动画执行完毕,就继续执行下一个动画:

这样就有了一个先后顺序。

本文简单地介绍了一下jQuery animate函数的使用。

6. 附录

最后,附上一开始案例的代码,除了animate函数,还用到了js的定时器setInterval方法:

总结

标签: jquery中的动画吗,是怎样用的

本文链接地址:https://www.jiuchutong.com/biancheng/383135.html 转载请保留说明!

上一篇:jQuery实现微信长按识别二维码功能(html微信)

下一篇:jQuery为动态生成的select元素添加事件的方法(jquery动态生成页面)

  • 社保与个税有关系么
  • 关税的完税价格是什么意思
  • 异地预缴税款不交可以吗
  • 公司购入烟酒会计处理
  • 公司如何做成集团
  • 开发成本属于什么类账户
  • 财务报表里现金是什么
  • 公司补贴怎样做分录?
  • 生产用电费
  • 建筑业暂估成本表
  • 广告制作需要交文化建设费吗
  • 仓库货物破损处理方法
  • 发票对方认证不了怎么回事
  • 向其他单位无偿提供服务的不需缴纳增值税
  • 应交税金成负数
  • 外贸企业购进货物出口后,应退消费税应当贷记
  • 纳税主要是哪些方面
  • 外币投入资本不产生汇兑损益
  • 企业所得税地方分成比例
  • 房地产车位收入做账
  • 升级声卡驱动后声音禁用了怎么恢复
  • 企业所得税计算方法公式
  • 事业单位工作人员暂行处分办法
  • win7为什么这么多人用
  • 证券的投资
  • 实例讲解yii2.0在php命令行中运行的步骤
  • SIMETER.EXE - SIMETER是什么进程 有什么用
  • 政策性搬迁会计处理案例
  • php curd
  • win10待机后无法输入密码
  • 商品盘点短缺和溢余的核算
  • 销售退回的处理方法
  • 房产税的纳税申报与处理会计分录
  • 短期借款利息的核算不可能涉及的账户是
  • vue 滚动条往下滑
  • 应交增值税明细科目怎么看
  • js轮播图实现思路
  • css字体设置渐变色
  • 大前端最新
  • New Bing怼人、说谎、PUA,ChatGPT已经开始胡言乱语了
  • 金税盘白盘怎么分发发票
  • 投标代理费是什么意思
  • 原材料用于在建工程,进项税为什么不转出
  • 资产减值损失属于营业外支出吗
  • php sleep()
  • seata1.3.0配置
  • 企业预收账款缴纳个税吗
  • python 概率分布函数
  • 人工智能自动对焦又叫什么
  • mysql 大量数据
  • 产品成本核算的方法
  • 固定资产超过多少入账
  • 一般来说,采取质押贷款方式
  • 有哪些不动产
  • 个人取得的劳务报酬需要交增值税吗
  • 企业材料物资的采购费用包括
  • sql语句 字符串
  • mac上网速度慢
  • Win10 Mobile Build 10572 其它未记录更新内容汇总
  • centos6.5破解密码
  • windowsxpsp3是什么版
  • win8切换到桌面的快捷键
  • win10系统下怎么将腾讯qlv格式转换mp4格式?
  • bootstrap paginator分页插件的两种使用方式实例详解
  • 基于jquery的框架有哪些
  • js动态生成页面
  • linux中shell命令
  • div+css网页布局方法
  • shell脚本 教程
  • javascript以及javascript的作用
  • linux如何查看当前shell
  • shell中的注释用什么表示
  • javascript高级编程
  • 在centos上安装pycharm
  • 关于学习的名言
  • python怎么写字符串
  • 增值税纳税申报表附列资料(一)
  • 重庆地方税务局电子税务局官网
  • 东莞税收突破2000亿
  • 大宗物流服务平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设