jQuery 自定义动画效果

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script> 
 7 $(document).ready(function(){
 8   $("#start").click(function(){
 9     $("div").animate({height:'200px', width:'300px'},5000)
10     $("div").animate({left:'100px'},5000);
11     $("div").animate({fontSize:'3em'},5000);
12   });
13   
14   $("#stop").click(function(){
15     $("div").stop();
16   });
17 
18   $("#stop2").click(function(){
19     $("div").stop(true);
20   });
21 
22   $("#stop3").click(function(){
23     $("div").stop(true,true);
24   });
25   
26 });
27 </script> 
28 </head>
29 <body>
30 
31 <button id="start">开始</button>
32 <button id="stop">停止</button>
33 <button id="stop2">停止所有</button>
34 <button id="stop3">停止但要完成</button>
35 <p><b>"开始"</b> 按钮会启动动画。</p>
36 <p><b>"停止"</b> 按钮会停止当前活动的动画,但允许已排队的动画向前执行。</p>
37 <p><b>"停止所有"</b> 按钮停止当前活动的动画,并清空动画队列;因此元素上的所有动画都会停止。</p>
38 <p><b>"停止但要完成"</b> 会立即完成当前活动的动画,然后停下来。</p> 
39 
40 <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
41 
42 </body>
43 </html>

 

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

 

提示:默认地,所有 HTML 元素都有一个静态位置,且无法移动。

如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!

 

提示:可以用 animate() 方法来操作所有 CSS 属性吗?

是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

同时,色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。

也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

实例

1 $("button").click(function(){
2   $("div").animate({
3     left:'250px',
4     height:'+=150px',
5     width:'+=150px'
6   });
7 });

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":

1 $("button").click(function(){
2   $("div").animate({
3     height:'toggle'
4   });
5 });

jQuery animate() - 使用队列功能

默认地,jQuery 提供针对动画的队列功能。

这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

jQuery 方法链接

直到现在,我们都是一次写一条 jQuery 语句(一条接着另一条)。

不过,有一种名为链接(chaining)的技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。

提示:这样的话,浏览器就不必多次查找相同的元素。

如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

 

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动:

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

转载于:https://www.cnblogs.com/the-wang/p/7750143.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值