向朔(front end developer)

学习分享|热爱生活|奋斗青年

JQuery中的动画整理

【在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()方法
---------------------------------------------------------------------------------------------



阅读更多
版权声明:本文为博主原创文章,未经同意,不得转载。 https://blog.csdn.net/u013778905/article/details/51545927
个人分类: JQuery
想对作者说点什么? 我来说一句

jquery动画jquery动画

2011年07月08日 1KB 下载

没有更多推荐了,返回首页

不良信息举报

JQuery中的动画整理

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭