jquery中的animate动态效果是如何通过Js实现的?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中的animate动态效果是如何通过Js实现的?相关的知识,希望对你有一定的参考价值。
如题
参考技术A 你可以看下jquery的源代码,animate: function( prop, speed, easing, callback )
var empty = jQuery.isEmptyObject( prop ),
optall = jQuery.speed( speed, easing, callback ),
doAnimation = function()
// Operate on a copy of prop so per-property easing won't be lost
var anim = Animation( this, jQuery.extend( , prop ), optall );
// Empty animations, or finishing resolves immediately
if ( empty || jQuery._data( this, "finish" ) )
anim.stop( true );
;
doAnimation.finish = doAnimation;
return empty || optall.queue === false ?
this.each( doAnimation ) :
this.queue( optall.queue, doAnimation );
jQuery.speed = function( speed, easing, fn )
var opt = speed && typeof speed === "object" ? jQuery.extend( , speed ) :
complete: fn || !fn && easing ||
jQuery.isFunction( speed ) && speed,
duration: speed,
easing: fn && easing || easing && !jQuery.isFunction( easing ) && easing
;
opt.duration = jQuery.fx.off ? 0 : typeof opt.duration === "number" ? opt.duration :
opt.duration in jQuery.fx.speeds ? jQuery.fx.speeds[ opt.duration ] : jQuery.fx.speeds._default;
// normalize opt.queue - true/undefined/null -> "fx"
if ( opt.queue == null || opt.queue === true )
opt.queue = "fx";
// Queueing
opt.old = opt.complete;
opt.complete = function()
if ( jQuery.isFunction( opt.old ) )
opt.old.call( this );
if ( opt.queue )
jQuery.dequeue( this, opt.queue );
;
return opt;
参考技术B <script>
$(document).ready(function()
$("button").click(function()
var div=$("div");
div.animate(left:'100px',"slow");
div.animate(fontSize:'3em',"slow");
);
);
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下,所有 html 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html> 参考技术C 用setinterval()方法连续执行函数就行本回答被提问者采纳 参考技术D 没有研究的这么深入来着。
jQuery 动画
我们可以通过 jQuery
中的 animate()
方法来创建自定义动画。
animate()方法
animate()
方法用于创建自定义动画。
语法如下:
$(selector).animate({params}, speed, easing, callback);
params
:必需参数,定义要设置动画的CSS
属性。speed
:可选参数,指定效果的持续时间,可选值有slow
、fast
、毫秒。easing
:可选参数,规定在不同的动画点中设置动画速度的easing
函数。内置的easing
函数有swing
、linear
。callback
:可选参数,是动画完成后要执行的函数。
默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。如果要对位置进行操作,需要先将元素的 position
属性设置为 relative
、fixed
、absolute
。
示例:
我们来看一下例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({left:'300px'});
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>开始动画</button></p>
</body>
</html>
在这个例子中,有一个大的矩形框,我们要实现的效果为点击按钮,让粉色正方形向右移动。需要注意的是,我们必须给要移动的元素设置 position
属性,否则 animate()
方法不起作用。而花括号 {}
中的就是 CSS
属性,animate()
方法中几乎可以操作所有 CSS
属性。但是在使用时必须注意,要使用 Camel
标记法书写所有的属性名,例如 padding-left
使用 paddingLeft
,padding-right
使用 paddingRight
等。
我们来看一下上述代码在浏览器中的演示效果:
操作多个属性
我们可以为一个动画设置多个属性,各个属性之间通过逗号隔开。例如设置动画移动后的距离,透明度,宽度和高度。
示例:
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '20px',
width: '20px'
}, 2000);
});
});
在浏览器中的演示效果:
使用相对值
我们在给动画设置 CSS
属性的时候可以使用相对值,相对值就是相当于元素当前值,在值的前面加上 +=
或 -=
符号。
示例:
$(function(){
$("button").click(function(){
$(".rect").animate({
left: '400px',
opacity: '0.8',
height: '-=50px',
width: '+=100px'
}, 2000);
});
});
在浏览器中的演示效果:
使用预先定义的值
我们可以将属性的动画值指定为 show
,hide
或 toggle
。
示例:
show
表示显示,hide
表示隐藏,toggle
表示切换显示与隐藏:
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
height: 'toggle',
width: 'toggle',
}, 2000);
});
});
在浏览器中的演示效果:
使用队列功能
默认情况下,jQuery
提供针对动画的队列功能。这也就意味着如果在彼此之后编写多个 animate()
方法调用,jQuery
将使用这些方法调用创建一个“内部”队列,然后它逐一运行 animate
调用。
示例:
$(function(){
$("button").click(function(){
var rect = $(".rect");
rect.animate({left:'300px', width:'300px', opacity:'0.8'}, 2000);
rect.animate({height:'10px', opacity:'0.5'}, "slow");
rect.animate({width:'100px', height:'100px', opacity:'1'}, 2000);
});
});
在浏览器中的演示效果:
stop()方法
stop()
方法用于在动画或效果完成前对它们进行停止。它适用于所有的 jQuery
效果函数,包括滑动,淡入淡出和自定义动画。
语法如下:
$(selector).stop(stopAll,goToEnd);
stopAll
:可选参数,指定是否应该清除动画队列,默认值为false
,即只会停止活动的动画,后续队列动画仍继续执行。gotoend
:可选参数,指定是否立即完成当前动画,默认值为false
。
示例:
点击按钮开始动画,点击粉色正方形停止动画:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<style>
.box{
width: 700px;
height: 200px;
border: 1px solid #000;
}
.rect{
width: 100px;
height: 100px;
background: pink;
margin-top: 50px;
position:absolute;
}
</style>
<script>
$(function(){
$("button").click(function(){
$(".rect").animate({
left:'300px',
width: '300px',
}, 3000);
});
$(".rect").click(function(){
$(this).stop();
});
});
</script>
</head>
<body>
<div class="box">
<div class="rect"></div>
</div>
<p><button>点击按钮开始动画</button></p>
</body>
</html>
在浏览器中的演示效果:
以上是关于jquery中的animate动态效果是如何通过Js实现的?的主要内容,如果未能解决你的问题,请参考以下文章