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停止动画和判断是否处于动画状态(转)

1、停止元素的动画 很多时候需要停止匹两己元素正在进行的动画,例如上例的动画,如l果需要在某处停止动画,需要使用stop()方法。stop()方法的语法缩构为: stop([clearQueue]...
  • dragoo1
  • dragoo1
  • 2015年09月23日 15:21
  • 3729

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

jQuery的效果函数列表:   animate():对被选元素应用“自定义”的动画。   clearQueue():对被选元素移除所有排队的函数(仍未运行的)。   delay()...
  • Toleranty
  • Toleranty
  • 2016年10月08日 21:22
  • 621

jQuery操作动画队列

1.前言 当在jQuery对象上调用动画方法时,如果对象正在执行某个动画效果,那么新调用的动画方法就会被添加到动画队列中,jQuery会按顺序依次执行动画队列的每个动画。 jQuery提供了以下几...
  • owen_william
  • owen_william
  • 2016年05月07日 20:35
  • 2474

jQuery 动画效果,消失,显现,渐出,渐入

jQuery 动画效果,消失,显现,滑动消失,滑动显现,滑动切换,渐出,渐入,淡化,移动...
  • shuair
  • shuair
  • 2017年04月14日 16:52
  • 1307

jQuery动画序列

**这里写代码片JQuery中的动画序列queue(),dequeue(),和stop()如下例: div.show("slow").animate({left:'+=300'},2000).sl...
  • allbycode
  • allbycode
  • 2016年12月16日 14:57
  • 586

html5 jqueryrotate插件实现旋转动画

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil...
  • xiangzhihong8
  • xiangzhihong8
  • 2015年12月08日 18:43
  • 2670

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each)

jQuery——动画篇(隐藏显示、上卷下拉、淡入淡出、animate、stop、each 、inArray、get、index)...
  • anfangw
  • anfangw
  • 2016年12月16日 16:47
  • 3176

23个漂亮的jQuery文字动画效果教程示例

Apple-like Retina Effect With jQuery Check this tutorial to know how the author has turned a ...
  • maikforever
  • maikforever
  • 2013年07月11日 21:29
  • 1706

7个炫酷的jQuery动画插件及源码

1、jQuery书本翻页3D动画特效 记得以前我们有介绍过不少书本翻页的动画,比如这款CSS3书本翻页动画,制作就非常逼真。今天要分享的这款jQuery书本翻页3D动画功能更加强大,可以支持任意...
  • vector5210
  • vector5210
  • 2014年10月23日 13:42
  • 588

8款效果精美的 jQuery 加载动画和进度条插件

加载动画和进度条在网站和 Web 应用中的使用非常流行。虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高。在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用...
  • qq_27966627
  • qq_27966627
  • 2016年04月19日 13:37
  • 1675
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery中的动画整理
举报原因:
原因补充:

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