jQuery里面的动画
原创
jQuery里面的事件
一、基本动画
二、滑动动画
三、淡入淡出动画
四、自定义动画
五、获取动画队列
参数说明
参数 | 说明 |
|---|---|
speed | 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000) |
easing | (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear" |
fn | 在动画完成时执行的函数，每个元素执行一次。 |
easing | 用来指定切换效果，默认是"swing"，可用参数"linear" |
fn | 在动画完成时执行的函数，每个元素执行一次 |
out | 当鼠标移到元素上或移出元素时触发执行的事件函数 |
over | 鼠标移到元素上要触发的函数 |
type | 要触发的事件类型 |
events | 一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。 |
jQuery动画暂不支持css3属性
<button id="btn">切换</button>
<button id="stop">停止</button>
<button id="get">获取</button>
<div class="box" style=" width: 100px;height: 200px;background-color: red;"></div>
一、基本动画
方法 | 概述 |
|---|---|
show([s,[e],[fn]]) | 显示隐藏的匹配元素。 |
hide([s,[e],[fn]]) | 隐藏显示的元素 |
toggle([s],[e],[fn]) | 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 |
$("#btn").click(function () {
$(".box").hide(1000,"swing",function(){
console.log("动画完成");
});
$(".box").show(1000,"swing",function(){
console.log("动画完成");
});
$(".box").toggle(1000,function(){
console.log("动画完成");
});
}) 二、滑动动画
方法 | 概述 |
|---|---|
slideDown([s],[e],[fn]) | 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数 |
slideUp([s,[e],[fn]]) | 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数 |
slideToggle([s],[e],[fn]) | 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数 |
$("#btn").click(function () {
$(".box").slideUp(1000,function(){
console.log("动画完成");
});
$(".box").slideDown(1000,function(){
console.log("动画完成");
});
$(".box").slideToggle(1000,function(){
console.log("动画完成");
});
}) 三、淡入淡出动画
方法 | 概述 |
|---|---|
fadeIn([s],[e],[fn]) | 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数 |
fadeOut([s],[e],[fn]) | 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数 |
fadeTo([[s],o,[e],[fn]]) | 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数 |
fadeToggle([s,[e],[fn]]) | 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数 |
$("#btn").click(function () {
$(".box").fadeIn(1000,function(){
console.log("动画完成");
});
$(".box").fadeOut(1000,function(){
console.log("动画完成");
});
$(".box").fadeToggle(1000,function(){
console.log("动画完成");
});
$(".box").fadeTo(1000,0.5,function(){
console.log("动画完成");
});
})
四、自定义动画
方法 | 概述 |
|---|---|
animate(p,[s],[e],[fn]) | 用于创建自定义动画的函数 |
stop([c],[j]) | 停止所有在指定元素上正在运行的动画 |
delay(d,[q]) | 设置一个延时来推迟执行队列中之后的项目 |
finish([queue]) | 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画 |
stop 停止当前正在运行的动画
参数
参数1.是否立即清除动画的队列
参数2.是否停止当前动画 立即完成
$("#btn").delay(1000).click(function () {
$(".box").animate({
marginLeft:200,
marginTop:100
},200,function(){
console.log("动画完成");
}).animate({
opacity:0.5
},1000,function(){});
});
//stop--停止当前正在执行的动画
$("#stop").click(function(){
$(".box").stop(true,false);//默认false、false
}); finish 等价 stop(true,true)，当前动画停止 ，不清除队列 ，直接队列完成
五、获取动画队列
//获取动画队列
$('#get').click(function (){
//可以知道当前元素有几个动画队列
console.log($('.box').queue());//(11) ["inprogress", ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ, ƒ]
});
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。