jquery animate()方法 动画详解(超简单易懂)
2023-09-27 14:28:32 时间
jquery animate 动画详解(超简单易懂)
animate()方法是jquery里的动画效果,通过修改css相关属性,在规定时间内,值是不断变化的从而形成了一种动画的效果。
(selector).animate({styles},speed,easing,callback)
styles 必需。规定产生动画效果的一个或多个 CSS 属性/值。逗号分隔
speed 可选。规定动画的速度。可能的值 毫秒 "slow" "fast"
easing 可选。规定在动画的不同点中元素的速度。默认值是 "swing"。可能的值:
- "swing" - 在开头/结尾移动慢,在中间移动快
- "linear" - 匀速移动
提示:扩展插件中提供更多可用的 easing 函数。
callback 可选。animate 函数执行完之后,要执行的函数。
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px"});
});
});
单击按钮盒子变高到300px(达到300px不是在原基础上加300px),speed没写,默认是normal,easing默认swing,可以安装插件在插件中选择更多的移速效果,callback执行函数。
注:css属性名必须要采用驼峰命名法,其次个别属性进行操作的时候,要符合要求,比如left top设置时要给相关元素进行定位,在进行颜色设置时,要加入颜色插件才能修改颜色。
多属性
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px",width:"300px"});//多属性写在一起 同时触发
});
动画队列
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px",width:"300px"}); //动画队列 会按顺寻执行
$("#box").animate({height:"100px",width:"100px"});
});
});
属性相对值
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"+=100px",width:"+=300px"});//相对值书写 在原有基础上增加100px
});
});
回调函数
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"+=100px",width:"+=300px"},2000,function(){ //回调函数
$("#box").animate({height:"+=100px",width:"+=300px"},2000)});
});
});
stop()停止动画队列 。
相关文章
- jQuery简单实现iframe的高度根据页面内容自适应的方法(转)
- jQuery中on()方法用法实例
- jquery中的ajax方法参数的用法和他的含义
- Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数、ColModel API、事件及方法
- 基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
- jQuery 效果 - animate() 方法
- 使用jquery获取url及url参数的方法
- JQuery_九大选择器
- 2016年6月份那些最实用的 jQuery 插件专辑
- jQuery addClass removeClass toggleClass方法概述
- JQuery预览图片
- jquery ajax return值无法获取的解决方法
- 基于jquery hover图片遮罩层滑动
- 基于jquery带时间轴的图片轮播切换代码
- jquery获取css颜色值返回RGB应用
- jquery小技巧:使用jquery.confirm和PNotify实现弹出提示和消息提示
- Jquery中$.ajax()方法详解【转】
- 50 个 jQuery 小技巧
- jQuery 对AMD的支持(Require.js中如何使用jQuery)
- 鼠标悬浮事件 -jQuery hover()方法(layer.js)(layer.tips)