jq的动画实质是通过dom+自定义animate()(进行封装的最大的区别就是给它起了一个语义化的名称;api中的动画是把常用的封装好了我们直接调用即可,api中的动画基本上都是脱标)
1.animate(params,[speed],[easing],[fn]);自定义动画,异步
参数详解:
params:一组包含作为动画属性和终值的样式属性和及其值的集合(必选,json的形式)
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数,每个元素执行一次。
动画支持的属性:
http://www.w3school.com.cn/jquery/effect_animate.asp
执行过程为:speed秒内将params中的可行性执行完毕,然后再立即执行fn函数
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 300px;
height: 100px;
line-height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<button type="button" class="animate">动画</button>
<button type="button" class="stopAnimate">停止动画</button>
<div class="box">
https://blog.csdn.net/muzidigbig
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
// $('.box').click(function () {
// var params1 = { 'marginLeft': '200px', 'height': '200px', 'borderRadius': '50%' };
// var params2 = { 'marginTop': '100px', 'height': '200px', 'opacity': '0' };
// $(this).animate(params1, 2000, function () {
// $(this).animate(params2, 2000, function () {
// alert('自定义函数执行完毕!')
// })
// });
// });
// animate() 是一个异步
$('.animate').click(function() {
$('.box').animate({
width: '500px'
},2000).animate({
height: '300px'
},1000)
})
$('.stopAnimate').click(function() {
// 默认停止当前的队列,执行其他的队列;true 停止所有的队列
$('.box').stop(true);
})
</script>
</html>
注意:
jQuery预设的三组动画效果的语法几乎一致:参数说明,第一个是动画的执行时长,第二个是动画执行完成后的回调函数。
jq提供api
2. api动画--显示/隐藏/切换 show()/hide()/toggle();(隐藏,慢慢谈去)
show() 作用:让匹配的元素展示出来 控制元素的 高宽透明度
hide() 作用:让匹配元素隐藏掉 用法参考show方法
toggle() 切换可代替上面俩中方法(自行判断show()了则hide();hide()则show())
// 用法一:
// 参数为数值类型,表示:执行动画时长
/* 单位为:毫秒(ms),参数2000即2秒钟显示完毕 */
$(selector).show(2000);
// 用法二:
// 参数为字符串类型,是jQuery预设的值,共有三个,分别是:slow、normal、fast
/* 跟用法一的对应关系为: */
/* slow:600ms、normal:400ms、fast:200ms */
$(selector).show(“slow”);
// 用法三:
// 参数一可以是数值类型或者字符串类型
// 参数二表示:动画执行完后立即执行的回调函数
$(selector).show(2000, function() {});
// 用法四:
// 不带参数,作用等同于 css(“display”,”block”)
/* 注意:此时没有动画效果 */
$(selector).show();
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button class="hide">hide隐藏</button>
<button class="show">show显示</button>
<button class="toggle">show/hide切换</button>
<div class="box">
<ul>
<li>muzidigbig</li>
<li>muzidigbig</li>
<li>muzidigbig</li>
<li>muzidigbig</li>
</ul>
</div>
<p>你既然认准一条道路,何必去打听要走多久。</p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$('.hide').click(function () {
//不传参立即消失(脱标)
// $('.box').hide();
//传一个参,多少秒后消失
// $('.box').hide(3000);
//传2个参数,多少秒后执行后面的函数
// $('.box').hide(3000,function () {
// alert('muzidigbig已隐藏!')
// });
});
$('.show').click(function () {
//传参同上
$('.box').show(3000);
});
$('.toggle').click(function () {
//传参同上
$('.box').toggle(3000);
});
</script>
</html>
3. api动画--滑入/滑出/切换 slideUp()/slideDown()/slideToggle()(像生活中的卷门帘,控制高度)
slideUp() 作用:让元素以上拉的动画效果隐藏起来
slideDown() 作用:让元素以下拉的动画效果展示起来
注意:省略参数或者传入不合法的字符串,那么则使用默认值:400毫秒(同样适用于fadeIn/slideDown/slideUp
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button class="slideUp">slideUp隐藏</button>
<button class="slideDown">slideDown显示</button>
<button class="slideToggle">slideToggle显示</button>
<button class="updown">up-down</button>
<div class="box">
<ul>
<li>muzidigbig</li>
<li>muzidigbig</li>
<li>muzidigbig</li>
<li>muzidigbig</li>
</ul>
</div>
<p>你既然认准一条道路,何必去打听要走多久。</p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$('.slideUp').click(function () {
$('.box').slideUp(2000);
});
$('.slideDown').click(function () {
$('.box').slideDown(2000);
});
$('slideToggle').click(function () {
$('.box').slideToggle(2000);
});
$('.updown').click(function () {
//delay()设置一个延时来推迟执行队列中之后的项目。
$('.box').slideUp(2000).delay(2000).slideDown(2000);
});
</script>
</html>
4. api动画--淡入淡出 fadeIn()/fadeOut()/fadeToggle()/fadeTo()
淡入淡出只能控制元素的不透明度从完全不透明到完全透明,并且时间参数是必需的!;而fadeTo可以指定元素不透明度的具体值。
fadeIn() 作用:让元素淡淡的进入视线的方式显示
fadeOut() 作用:让元素渐渐的从视线中消失
fadeToggle() 作用:通过改变透明度,切换匹配元素的动画效果
fadeTo() 作用:把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。
// 用法有别于其他动画效果
// 第一个参数表示:时长(必选)
// 第二个参数表示:不透明度值,取值范围:0-1
$(selector).fadeTo(1000, 0.5); // 0全透,1全不透
// 第一个参数为0,此时作用相当于:.css(“opacity”, .5);
$(selector).fadeTo(0, .5);
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
line-height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button class="fadeOut">fadeOut隐藏</button>
<button class="fadeIn">fadeIn显示</button>
<button class="fadeToggle">fadeToggle显示</button>
<button class="fadeTo">fadeTo显示</button>
<button class="outin">out--in</button>
<div class="box">
https://blog.csdn.net/muzidigbig
</div>
<p>你既然认准一条道路,何必去打听要走多久。</p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$('.fadeOut').click(function () {
$('.box').fadeOut(2000);
});
$('.fadeIn').click(function () {
$('.box').fadeIn(2000);
});
$('.fadeToggle').click(function () {
$('.box').fadeToggle(2000);
});
$('.fadeTo').click(function () {
$('.box').fadeTo(2000,.5,function () {
alert('我的透明度为0.5');
});
});
$('.outin').click(function () {
//delay()设置一个延时来推迟执行队列中之后的项目。
$('.box').fadeOut(2000).delay(2000).fadeIn(2000);
});
</script>
</html>
重点:
5. delay() 设置一个延时来推迟执行队列中之后的动画。
delay(duration,[queueName])
duration:延时时间,单位:毫秒
queueName:队列名词,默认是Fx,动画队列。
6. stop() 停止所有在指定元素上正在运行的动画
如果多个动画方法在同一个元素上调用,那么对这个元素来说,后面的动画将被放到效果队列中。这样就形成了动画队列。(联想:排队进站)
// 第一个参数表示后续动画是否要执行
(true:后续动画不执行,停止所有的队列 ;false:停止当前队列,后续动画会执行)
// 第二个参数表示当前动画是否执行完
(true:立即执行完成当前动画 ;false:立即停止当前动画)
$(selector).stop(clearQueue,jumpToEnd);
都不给,默认false;
stop([queue],[clearQueue],[jumpToEnd])BooleanV1.7
queue:用来停止动画的队列名称
clearQueue:如果设置成true,则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true,则完成队列。可以立即完成动画。
解释:
当调用stop()方法后,队列里面的下一个动画将会立即开始。但是,如果参数clearQueue被设置为true,那么队列面剩余的动画就被删除了,并且永远也不会执行。
如果参数jumpToEnd被设置为true,那么当前动画会停止,但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如:slideUp()方法,那么元素会立即隐藏掉。如果存在回调函数,那么回调函数也会立即执行。
注意:如果元素动画还没有执行完,此时调用sotp()方法,那么动画将会停止。并且动画没有执行完成,那么回调函数也不会被执行。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
line-height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button class="delay">delay延迟动画</button>
<button class="stop">stop停止动画</button>
<div class="box">
https://blog.csdn.net/muzidigbig
</div>
<p>你既然认准一条道路,何必去打听要走多久。</p>
</body>
<script src="jquery-3.3.1.js"></script>
<script>
$('.delay').click(function () {
$('.box').fadeOut(2000).delay(2000).slideDown(2000);
});
$('.stop').click(function () {
$('.box').slideUp(2000).stop(false,false).slideDown(2000);
});
</script>
</html>
若有不足请多多指教!希望给您带来帮助!