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样式,他们控制元素显示和隐藏的时候效果相同,但是结果却不同。 具体说明如下: ...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

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

1、最简单的动画:显隐效果 CSS支持两种方法显示和隐藏元素,即使用visibility或display样式,他们控制元素显示和隐藏的时候效果相同,但是结果却不同。 具体说明如下: ...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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