JQ中的动画

来源：互联网发布：古风软件编辑：程序博客网时间：2024/06/08 03:26

JQ 中的 animate
语法： $(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
stop() 函数用于停止当前匹配元素上正在运行的动画。
默认情况下， stop() 函数只会停止当前正在运行的动画。如果你使用 animate()函数为当前
元素设置了 A、B、C 这 3 段动画，如果当前正在执行的动画是 A ，则只会停止动画 A 的执行，不会
画阻止动画 B 和和 C 的执行。当然，你也可以通过指定可选的选项参数来停止所有的动画。
停止动画并不是恢复到该动画执行前的状况，而是直接停止，当前动画执行到什么状态，就停留
在什么状态。例如：执行一个元素高度从 100px 到 200px 的过渡动画，当高度为 150px 时停止了
该动画，则当前高度仍然保持 150px 的现状。如果该动画设置了执行完毕后的回调函数，则不会执
行该回调函数。
该函数属于 jQuery 对象(实例)。
语法:
$(selector).stop(clearQueue,goToEnd) clearQueue,goToEnd 均为可选布尔值参
数
参数说明:
1、clearQueue 可选。代表是否要清空未执行完的动画队列。
$(selector).stop(true)则会停止所有后续动画或事件。
$(selector).stop(false)，则只停止当前执行的动画，后续动画不受影响。
$(selector).stop( )则会停止当前的动画，以当前状态开始接下来的动画。
2、goToEnd
$(selector).stop(true,true)。直接将正在执行的动画跳转到当前动画的末尾。
规定是否允许完成当前动画，该参数只能在设置了 stopAll 参数时使用
3 备注
默认情况下，不写参数，则会被认为两个参数都是 false。
4 jquery 动画的方法
5 动画队列
实例 1 ：
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({left:'100px'},5000);
$("div").animate({fontSize:'3em'},5000);
});
$("#stop").click(function(){
$("div").stop();
});
$("#stop2").click(function(){
$("div").stop(true);
});
$("#stop3").click(function(){
$("div").stop(true,true);
});
});
</script>
</head>
<body>
<button id="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"开始"</b> 按钮会启动动画。</p>
<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

阅读全文

0 0