文档章节

四、jQuery中的动画

Winnie007
 Winnie007
发布于 2015/11/17 10:36
字数 1821
阅读 57
收藏 2

通过jQuery的动画方法,能够轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验。

一、show()方法和hide()方法

1、show()方法和hide()方法

show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里,为一个元素调用hide()方法,会将该元素的display样式改为none。

隐藏元素:

$("element").hide();  //通过hide()方法隐藏元素

  也可以通过css方法设置display属性

$("element").css("display","none");//通过css()方法隐藏元素

当吧元素隐藏后,可以使用show()方法将元素的dislay样式设置为先前的显示状态。

$("element").show();

用jQuery做动画效果要求要在标准模式下,否则可能会引起动画抖动。

2、show()方法和hide()方法让元素动起来

show()方法和hide()方法在不带任何参数的情况下,相当于css("display","none/block/inline")。作用是立即隐藏或显示匹配的元素,不会有任何动画。如果希望在调用show()方法时,元素慢慢的显示出来,可以为show()方法指定一个速度参数,例如,指定一个速度关键字"slow"。

$("element").show("slow");

其他关键字还有:normal  fast。还可以为显示速度指定一个数字。

$("element").hide(600);

hide(600)方法会同时减少内容的高度、宽度和不透明度,直至这3个属性的值都为0,最后设置该元素的css规则为display:none.同理,show(600)方法则会从上到下增大内容的高度,从左到右增大内容的宽度,同时增加内容的不透明度,直至元素全部显示出来。

二、fadeIn()方法和fadeOut()方法

与show()方法不相同的是,fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度,直到元素完全消失(display:none)。fadeIn()方法则相反。

三、slideUp()方法和slidDown()方法

slideUp()方法和slideDown()方法只会改变元素的高低,当调用slideDown()方法时,这个元素将由上至下延伸显示。slideUp()方法正好相反,元素将由下到上缩短隐藏。

四、自定义动画animate()方法

前面已经讲了3种类型的动画。其中show()方法和hide()方法会同时修改元素的多个样式属性,高度、宽度、透明度。fadeOut()、fadeIn()方法只会修改元素的不透明度。slideDown()方法和slideUp()方法只会改变元素的高度。很多情况,这些方法无法满足用户的各种需求,那么就需要对动画有更多的控制,需要采取一些高级的自定义动画来解决这些问题。在jQuety中,可以使用animate()方法来自定义动画。animate(params,speed,callback)。

第一个参数:params 一个包含样式属性及值的映射,比如:{property1:"value1",property2:"value2",....}

第二个参数:speed 速度参数 可选。

callback:在动画完成时执行的函数,可选。

1、自定义简单动画

单击div区域,使得div向左移动:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<style type="text/css">
 #panel{position:relative; width:100px; height:100px; border:1px solid #0050D0; background:#96E555; cursor:pointer;}
</style>
<script type="text/javascript" >
 $(function(){
  $("#panel").click(function(){
   $(this).animate({left:"500px"},3000);
   });
  });
</script>
</head>
<body>
<div id="panel"></div>
</body>
</html>

2、累加累减动画

{left:"500px"}中的500px之前加上“+=”或“-=”符号表示在当前位置累加或者累减。

 $(function(){
  $("#panel").click(function(){
   $("#panel").animate({left:"+=500px"},3000);
   });
  });

 3、多重动画

 (1)、同时执行多个动画

例如在元素向右滑动的同时,放大元素的高度。

$(function(){
  $("#panel").click(function(){
   $(this).animate({left:"500px",height:"200px"},3000);
   });
  });

 (2)、按顺序执行多个动画

上例中,两个动画(left:"500px"和height:"200px")是同时发生的,如果想要按顺序执行动画,例如让<div>元素先向右滑动,然后在放大它的高度,只需把代码拆开,然后按照顺序写就可以了。

$(function(){
  $("#panel").click(function(){
   $(this).animate({left:"500px"},3000);
   $(this).animate({height:"200px"},3000);
   });
  });

 因为animate()方法都是对同一个jQuery对象进行操作,所以也可以改为链式的写法。

4、综合动画

例如,单击<div>元素后让他向右移动的同时增大它的高度,并将它的不透明度从50%变换到100%,然后在让他从上到下移动,同时他的宽度变大,当完成这些效果后,让他以淡出的方式隐藏。

 $(function(){
   $("#panel").click(function(){
    $("#panel").animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px"},3000).fadeOut("slow");
    });
  });

 5、动画回调函数

如果将上例的fadeOut("slow")改为css("border","5px solid blue"),实际的效果是,刚开始执行动画的时候,css()方法就执行了。出现这个问题的原因是css()方法并不会加入到动画队列中,而是立即执行。可以使用回调函数callback对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。

回调函数callback适用于所有的jQuery的动画的效果方法,例如slideDown()方法。

6、停止动画和判断是否处于动画状态

(1)、停止动画:

很多时候需要停止匹配元素正在进行的动画,如果需要在某处停止动画,需要使用stop()方法。stop([clearQueue],[gotoEnd])

参数clearQueue,gotoEnd都是可选的参数,为boolean值。clearQueue代表是否要清空未执行完的动画列表,gotoEnd代表是否直接将正在执行的动画跳转到末状态。如果直接使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。stop()方法会结束当前正在进行的动画,并立即执行队列中的下一个动画。

(2)、判断元素是否处于动画状态

在使用animate()方法的时候,要避免动画积累而导致的动画与用户的行为不一致。当用户快速在某个元素上执行animate()动画时,就会出现动画积累。解决方法是判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。

if(!$(element).is(":animated")){}

 7、其他动画方法

除了上面提到的动画方法,jQuery中还有3个专门用于交互的动画方法。

toogle(speed,callback)

slideToggle(speed,callback)

fadeTo(speed,opacity,callback)

(1)、toggle()方法

toggle()方法可以切换元素的可见状态,

(2)、slideToggle()方法

slideToggle()方法通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度

(3)、fadeTo()方法

fadeTo()方法可以把元素的不透明度以渐进方式调整到指定的值,这个动画只调整元素的不透明度,即匹配的元素的高度和宽度不会发生变化。

 

© 著作权归作者所有

Winnie007
粉丝 7
博文 36
码字总数 62847
作品 0
青岛
私信 提问
jquery合集--从零开始学习jQuery系列- 转载

从零开始学习jQuery系列 作者: ziqiu.zhang 来源: 博客园 发布时间: 2009-12-22 11:37 阅读: 3452 次 [收藏] 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二...

nkbai
2010/04/06
0
0
网站如何做到完全不需要 jQuery ?

来源:阮一峰 jQuery 是现在最流行的 JavaScript 工具库。 据统计,目前全世界 57.3% 的网站使用它。也就是说,10 个网站里面,有 6 个使用 jQuery。如果只考察使用工具库的网站,这个比例就...

红薯
2013/05/12
21.1K
110
50 个优秀 CSS3 技巧和优美的设计教程

Filter Functionality with CSS3 Thumbnail Proximity Effect with jQuery and CSS3 Fullscreen Background Image Slideshow with CSS3 CSS3 灯箱 Slopy Elements with CSS3 Item Blur Effec......

红薯
2012/01/11
2.6K
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
67
0
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.7K
5

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
4
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部