小编今天带大家了解使用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 样式属性:
backgroundColor
borderBottonColor.
borderLeftColor
borderRightColor
borderTopColor
Color
outlineColor
并发与排队效果
并发效果 : 指的就是多个动画效果同时执行。
$("#panel").click(function(){ $(this).animate({ left: "500px", height:"200px" }, 3000); };
排队效果 : 指的就是多个动画按照先后顺序执行。
$("#panel").click(function(){ $(this).animate({ left: "500px"},3000) .animate({ height: "200px" }, 3000); });
queue
: 用于控制当前的动画效果是并发还是排队效果:
/* queue - 用于控制当前的动画效果是并发还是排队效果 * 参数 * false - 并发 * true - 排队 */ $('#box').animate({ left : 300 },{ duration : 3000 }).animate({ top : 300 },{ duration : 3000, queue : true });
停止动画效果
jQuery 提供了 stop()
方法用于停止所有在指定元素上正在运行的动画,具体语法如下:
$element.animate([clearQueue][, gotoEnd]);
clearQueue : 如果设置成 true,则清空队列。可以立即结束动画。
gotoEnd : 让当前正在执行的动画立即完成,并且重设 show 和 hide 的原始样式,调用回调函数等
$('#stort').click(function(){ $('#box').animate({ left : 600 },3000).animate({ top : 200 },3000) }); $('#stop').click(function(){ /* * stop()方法没有接收任何参数时 - 立即停止执行动画 * stop(queue)方法的第一个参数 * false - 表示停止当前动画,但队列中的动画继续执行 * true - 表示停止当前动画,并且清空动画队列 * stop (queue,gotoEnd)方法的第二个参数 * false - 不会做任何处理 * true - 表示停止当前动画,并且将指定元素设置为动画执行完毕后的样式 */ $('#box').stop(true,true); });
延迟执行动画
jQuery 提供了 delay()
方法用于设置一个延时来推迟执行队列中之后的项目,具体语法如下:
$element.delay(duration, queueName]);
duration : 延时时间,单位为毫秒。
queueName : 队列名词,默认是Ex,动画队列。
$('#box').animate({ left : 600 },3000).delay(1000).animate({ top : 200 },3000);
jquery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件,是继Prototype之后又一个优秀的JavaScript代码库,能够用于简化事件处理、HTML文档遍历、Ajax交互和动画,以便快速开发网站。
感谢大家的阅读,以上就是“使用jQuery怎么实现动画”的全部内容了,学会的朋友赶紧操作起来吧。相信亿速云小编一定会给大家带来更优质的文章。谢谢大家对亿速云网站的支持!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。