1、首先双击打开HBuilderX工具,新建一个HTML5页面,并引入jquery文件,如下图所示。
让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名申请、虚拟主机、营销软件、网站建设、玄武网站维护、网站推广。
2、在body/body标签元素内,插入一个label和button,如下图所示。
3、保存代码并打开浏览器,预览页面效果结果出现报错。
4、检查代码发现,按钮点击事件,调用animate,这里的样式属性需要使用驼峰结构。
5、再次保存代码并在浏览器查看打印结果,结果发现animated不是函数。
6、返回到HBuilderX工具,修改代码animate,这样就完成了。
jquery.easing.js--animate--easing--参数
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
语法 1
$(selector).animate(styles,speed,easing,callback)
参数描述
styles
必需。规定产生动画效果的 CSS 样式和值。
可能的 CSS 样式值(提供实例):
backgroundPosition
borderWidth
borderBottomWidth
borderLeftWidth
borderRightWidth
borderTopWidth
borderSpacing
margin
marginBottom
marginLeft
marginRight
marginTop
outlineWidth
padding
paddingBottom
paddingLeft
paddingRight
paddingTop
height
width
maxHeight
maxWidth
minHeight
minWidth
font
fontSize
bottom
left
right
top
letterSpacing
wordSpacing
lineHeight
textIndent
注释:CSS 样式使用 DOM 名称(比如 "fontSize")来设置,而非 CSS 名称(比如 "font-size")。
speed
可选。规定动画的速度。默认是 "normal"。
可能的值:
毫秒 (比如 1500)
"slow"
"normal"
"fast"
easing
可选。规定在不同的动画点中设置动画速度的 easing 函数。
内置的 easing 函数:
swing
linear
扩展插件中提供更多 easing 函数。
callback
可选。animate 函数执行完之后,要执行的函数。
如需学习更多有关 callback 的内容,请访问我们的 jQuery Callback 这一章。
语法 2
$(selector).animate(styles,options)
参数描述
styles必需。规定产生动画效果的 CSS 样式和值(同上)。
options
可选。规定动画的额外选项。
可能的值:
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
第一 你的浏览器 对JQ的加载解析有一定的影响 建议更新到IE7或8
第二 遨游 也是基于IE内核 的浏览器 你当前系统IE有什么问题是什么版本 他也会有相同的问题
第三 如果不是一定必需和必要 JQ库你可以放在页面底部 最后加载
过多的头部调用 自然会影响到页面的打开速度
第四 如果可以 对于JQ的调用 尽可能的使用 Google的外部调用 因为Google的服务器带宽 肯定要比你的网站所在服务器或空间的带宽大的多
第五 对于网页设计 像JQ这种JS支持库文件 除非必要 不然要应以最小化使用为前提 网页上酷炫的效果与页面加载速度永远是相互对立矛盾的
第六 在编写应用程序上 应该可能的遵循W3C WEB标准 这样才能让浏览器解析的更顺畅 自然加载速度就会更快
希望我的回答对你有所帮助