广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
使用jQuery如何实现动画？下面本篇文章给大家介绍一些jQuery实现预定义动画或自定义动画的方法，希望对大家有所帮助！
预定义动画显示与隐藏
show() 方法和 hide() 方法是 jQuery 中最基本的动画方法。具体语法如下:
$element.show([speed],[easing],[fn]);$element.hide([speed],[easing],[fn]);登录后复制speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。easing : 用来指定切换效果，默认是 “swing”，可用参数 “linear ”。fn : 在动画完成时执行的函数，每个元素执行一次。
/* 显示与隐藏1.无动画版本 * show()- 显示 * hide() - 隐藏2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数*/$('#box').hide(2000,function(){$('#box').show(2000); });登录后复制滑动式动画
slidelUp() 方法和 slideDown() 方法通过改变高度值实现动画效果。具体语法如下:
$element.slideUp([speed],[easing],[fn]);$element.slideDown([speed],[easing],[fn]);登录后复制speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。easing : 用来指定切换效果，默认是“swing”，可用参数“linear ”。fn : 在动画完成时执行的函数，每个元素执行一次。
/* 滑动式动画 - slideup()和slideDown()* 注意 - 没有无动画版本(底层代码预定义动画执行的时长)* 效果 - 改变指定元素的高度*/$('#box').slideUp(3000);$('#box').slideDown(3000);登录后复制淡入淡出效果
fadeln() 方法和 fadeOut() 方法通过改变透明度实现动画效果。具体语法如下:
$element.fadeln([speed],[easing],[fn]);$element.fadeOut([speed],[easing],[fn]);登录后复制speed : 三种预定速度之一的字符串 (“slow”、“normal”或者“fast”) 或表示动画时长的毫秒数值。easing : 用来指定切换效果，默认是“swing”，可用参数“linear ”。fn : 在动画完成时执行的函数，每个元素执行一次。
// 改变元素的透明度$('#box').fadeOut(3000);$('#box').fadeIn(3000);登录后复制动画切换效果
jQuery 除了提供了三种预定义动画效果之外，还提供三组动画切换效果:
toggle ([speed], [easing] [, fn] )方法 : 如果元素是可见的，切换为隐藏的;如果元素是隐藏的，切换为可见的。slideToggle([speed], [easing] [, fn]) 方法 : 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。fadeToggle([speed], [easing] [, fn]) 方法 : 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。$('#btn').click(function(){// $('#box').toggle(3000);// $('#box').slideToggle(3000);$('#box').fadeToggle(3000)})登录后复制具有局限性
自定义动画animate()方法
jQuery 提供了 anirmate() 方法完成自定义动画效果，该方法具有两种用法:
$element.animate(properties,duration,easing,complete)登录后复制properties : 一个CSS属性和值的对象,动画将根据这组对象移动。duration : 一个字符串或者数字决定动画将运行多久。easing : 一个字符串，表示过渡使用哪种缓动函数。cormplete : 在动画完成时执行的回调函数。
/* animate()方法–自定义动画方法1.animate(properties,duration，callback) * properties - 表示cSS的样式属性 * 设置动画执行结束的样式属性值 * duration - 表示动画执行的时长，单位为亳秒 * callback - 表示动画执行完毕后的回调函数2.animate(properties,options) * properties - 表示cSS的样式属性 * 设置动画执行结束的样式属性值 * options - 表示设置动画的相关参数 * speed - 表示动画执行的时长,单位为毫秒 * comalete - 表示动画执行完毕后的回调函数 * queue - 布尔值,设置是否添加到动画队列中*//* $('#box').animate({ width : 100, height : 100},3000);*/$('#box').animate({ width : 100, height : 100, left : 100},{ speed : 3000});登录后复制通过 animate() 方法实现动画效果，但不支持以下 CSS 样式属性:
backgroundColorborderBottonColor.borderLeftColorborderRightColorborderTopColorColoroutlineColor并发与排队效果
并发效果 : 指的就是多个动画效果同时执行。
$("#panel").click(function(){ $(this).animate({ left: "500px", height:"200px" }, 3000);};登录后复制排队效果 : 指的就是多个动画按照先后顺序执行。
/* 显示与隐藏1.无动画版本 * show()- 显示 * hide() - 隐藏2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数*/$('#box').hide(2000,function(){$('#box').show(2000); });0登录后复制queue : 用于控制当前的动画效果是并发还是排队效果:
/* 显示与隐藏1.无动画版本 * show()- 显示 * hide() - 隐藏2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数*/$('#box').hide(2000,function(){$('#box').show(2000); });1登录后复制停止动画效果
jQuery 提供了 stop() 方法用于停止所有在指定元素上正在运行的动画，具体语法如下:
/* 显示与隐藏1.无动画版本 * show()- 显示 * hide() - 隐藏2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数*/$('#box').hide(2000,function(){$('#box').show(2000); });2登录后复制clearQueue : 如果设置成 true，则清空队列。可以立即结束动画。
gotoEnd : 让当前正在执行的动画立即完成，并且重设 show 和 hide 的原始样式，调用回调函数等
/* 显示与隐藏1.无动画版本 * show()- 显示 * hide() - 隐藏2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数*/$('#box').hide(2000,function(){$('#box').show(2000); });3登录后复制延迟执行动画
jQuery 提供了 delay() 方法用于设置一个延时来推迟执行队列中之后的项目，具体语法如下:
/* 显示与隐藏1.无动画版本 * show()- 显示 * hide() - 隐藏2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数*/$('#box').hide(2000,function(){$('#box').show(2000); });4登录后复制duration : 延时时间，单位为毫秒。
queueName : 队列名词，默认是Ex，动画队列。
/* 显示与隐藏1.无动画版本 * show()- 显示 * hide() - 隐藏2.有动画版本 - 同时改变宽度和高度 * show (speed,callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数 * hide (speed, callback) * speed - 动画执行的时长,单位为毫秒 * callback - 动画执行完毕后的回调函数*/$('#box').hide(2000,function(){$('#box').show(2000); });5登录后复制相关视频教程推荐：jQuery视频教程
以上就是聊聊使用jQuery如何实现动画（代码详解）的详细内容，更多请关注9543建站博客其它相关文章！
发表评论