使用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);
};排队效果 : 指的就是多个动画按照先后顺序执行。
$("#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视频教程
