JQuery中的动画整理

原创 2016年05月31日 15:08:53

【在JQ动画中,都是通过改变元素的CSS属性来产生动画的】


JQ动画有以下几种:

1.show();

$("element").show(1000/"slow(600)"/"fast(200)"/"normal"(400));注意引号和相对应的时间会先改变元素的“display”属性为原来的值(会记住原来的属性值)然后再增加元素的高度和宽度以及不透明度三个属性(height、width、opacity)

2.hide();

会改变元素的“display”属性为“none”(会记住原来的属性值)在改变元素的“display”属性之前,会通过同时减少“内容”,即元素的高度和宽度以及透明度三个属性。(height、width、opacity),完成修改之后,最后才设置“display:none”。


3.fadeIn();只改变元素的不透明度(增大)。

4.fadeOut();只改变元素的不透明度(减小)。

4.slideUp();(由下至上隐藏,原来显示)

5.slideDown();(由上至下显示,原来为不显示)改变元素的高度

6.animate();自定义动画

$(".mobile-bg").stop().animate({opacity:"0",bottom:"-30px"},300,function(){...动画完成时执行回调函数...});

if(!$(element).is(":animated")){//判断元素是否处于动画状态,如果当前没有进行动画,则添加动画}

7.delay();动画延迟,必须要有动画才能延迟,所以要用到动画前面。

$(this).next(".family-info").stop(true, false).delay(500).fadeIn(0);

8.stop(true,false),停止当前动画,true清空未执行完的动画队列,false,不将正在执行的动画跳转到末状态。

9.toggle();切换元素可见状态

10.slideToggle();通过高度变化切换元素可见状态

11.fadeTo(600,0.2);把元素的不透明度以渐进方式调整到指定的值

12.fadeToggle();通过不透明度变化来切换元素的可见性

---------------------------------------------------------------------------------------------
| **************方法名**********************说明
---------------------------------------------------------------------------------------------
|**********hide()&show()******************修改高度、宽度、不透明度
---------------------------------------------------------------------------------------------
|********fadeIn()&fadeOut()**************只修改不透明度
---------------------------------------------------------------------------------------------
|*******slidUp()&slidDown()**************只修改高度
---------------------------------------------------------------------------------------------
|*************fadeTo() *********************只修改不透明度
---------------------------------------------------------------------------------------------
|**************toggle()*********切换代替执行hide()和show(),all
---------------------------------------------------------------------------------------------
|***********slideToggle() *****切换代替执行slidUp()&slidDown(),height
---------------------------------------------------------------------------------------------
|***********fadeToggle()******切换代替执行fadeIn()&fadeOut(),opacity
---------------------------------------------------------------------------------------------
|************animate() ********all,以上动画实质内部都调用了animate()方法
---------------------------------------------------------------------------------------------



版权声明:本文为博主原创文章,欢迎转载和发表评论,转载请注明出处。

相关文章推荐

jQuery中常用动画效果函数(日常整理)

jQuery的效果函数列表:   animate():对被选元素应用“自定义”的动画。   clearQueue():对被选元素移除所有排队的函数(仍未运行的)。   delay()...

jQuery整理笔记六----jQuery动画

1、最简单的动画:显隐效果 CSS支持两种方法显示和隐藏元素,即使用visibility或display样式,他们控制元素显示和隐藏的时候效果相同,但是结果却不同。 具体说明如下: ...

jQuery整理笔记六----jQuery动画

1、最简单的动画:显隐效果 CSS支持两种方法显示和隐藏元素,即使用visibility或display样式,他们控制元素显示和隐藏的时候效果相同,但是结果却不同。 具体说明如下: ...

jquery加入购物车动画

  • 2017年08月27日 13:30
  • 108KB
  • 下载

JQuery、AJAX加载数据时候的loading加载动画实现步骤

对于AJAX,异步传输数据,那肯定是要等待服务器的数据返回,对于客户来说,等待数据会让他们失去耐心,一种加载动画的方式,可以让客户知道,这是需要一点时间的,客户体验比较友好,下面就来实现这个功能吧。1...

jquery的动画效果

  • 2015年02月25日 10:55
  • 30KB
  • 下载

jQuery动画

  • 2014年04月08日 18:17
  • 846KB
  • 下载

HTML5+jQuery制作温馨浪漫爱心表白动画特效

HTML5+jQuery制作温馨浪漫爱心表白动画特效 代码下载地址:http://www.zuidaima.com/share/1695882735602688.htm...
  • yaerfeng
  • yaerfeng
  • 2014年02月14日 10:22
  • 31389

jquery开发最酷动画文档

  • 2014年09月08日 13:31
  • 5.22MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中的动画整理
举报原因:
原因补充:

(最多只允许输入30个字)