jQuery 动画

jQuery动画相关方法概况

方法

说明

实例

hide()和show()

隐藏和显示 HTML 元素。

$("#hide").click(function(){         $("p").hide();     });         $("#show").click(function(){         $("p").show();     });

toggle()

可以使用 toggle() 方法来切换 hide() 和   show() 方法。

$("button").click(function(){        $("p").toggle();     });

fadeIn()和fadeOut()

淡入和淡出可见元素。

$("button").click(function(){          $("#div").fadeOut(3000);          $("#div").fadeIn(3000);     });

fadeToggle()

可以使用fadeToggle()方法来切换fadeIn() 与   fadeOut() 方法。

$("button").click(function(){          $("#div1").fadeToggle();          $("#div2").fadeToggle("slow");          $("#div3").fadeToggle(3000);     });

fadeTo()

fadeTo()方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$("button").click(function(){          $("#div1").fadeTo("slow",0.15);     });

slideUp()和slideDown()

向上和向下滑动元素。

$("#flip").click(function(){           $("#panel").slideUp(1000);           $("#panel").slideDown(1000);     });

slideToggle()

可以使用 slideToggle() 方法来切换   slideUp() 与 slideDown() 方法。

$("#flip").click(function(){          $("#pane").slideToggle();     });

animate()

animate() 方法允许您创建自定义的动画。

$("button").click(function(){        $("div").animate({          left:'250px',          opacity:'0.5',          height:'+=150px',          width:'-=150px'        });     });

stop()

stop() 方法用于在动画或效果完成前对它们进行停止。

$("#stop").click(function(){           $("#panel").stop();     });

显示/隐藏

(1)hide() 和 show()

在 jQuery 中,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

语法

$(selector).hide(speed,callback);
$(selector).show(speed,callback); 

注意:以下的speed和callback参数说明对于本文介绍的其他方法均适用。所以下文不再赘述。

可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 、"normal"或毫秒数。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

范例代码

如下代码的作用是:点击按钮后,触发<p>元素的隐藏动作,速度为1000毫秒,动作结束后,弹出“已经隐藏”提示。

$("button").click(function(){
$("p").hide(1000, function(){
alert("已经隐藏");
});
});

(2)toggle() 在jQuery中,可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法

$(selector).toggle(speed,callback);

参数说明可以参考 hide() 和 show()。

淡入 / 淡出

(1)fadeIn() 和 fadeOut()

在 jQuery 中,可以使用 fadeIn() 和 fadeOut() 方法来淡入和淡出 HTML 元素。

语法

$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);

参数说明可以参考 hide() 和 show()。

(2)fadeToggle()

在jQuery中,可以使用fadeToggle()方法来切换fadeIn() 与 fadeOut() 方法。

语法

$(selector).fadeToggle(speed,callback);

参数说明可以参考 hide() 和 show()。

(3)fadeTo()

在jQuery中,fadeTo()方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

语法

$(selector).fadeTo(speed,opacity,callback);

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

其余参数说明可以参考 hide() 和 show()。

滑动

(1)slideUp() 和 slideDown()

在 jQuery 中,可以使用 slideUp() 和 slideDown() 方法来向上滑动、向下滑动元素。

语法

$(selector).slideUp(speed,callback);
 $(selector).slideDown(speed,callback);

参数说明可以参考 hide() 和 show()。

(2)slideToggle()

在 jQuery 中,可以使用 slideToggle() 方法来切换 slideUp() 与 slideDown() 方法。

语法

$(selector).slideToggle(speed,callback);

参数说明可以参考 hide() 和 show()。

动画

animate()

在jQuery中,animate() 方法允许创建自定义的动画。

语法

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

其余参数说明可以参考 hide() 和 show()。

范例代码

$("button").click(function(){
     $("div").animate({
         left:'250px',
         opacity:'0.5',
         height:'150px',
         width:'150px'
     });
 });

停止动画

stop()

在jQuery中,stop() 方法用于在动画或效果完成前对它们进行停止。

语法

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GreenLeaves

Oracle 分页查询

本文使用到的是oracle数据库scott方案所带的表,scott是oracle数据库自带的方案,使用前请确保其解锁 ? Oracle分页一共有三种 1、使用r...

2078
来自专栏haifeiWu与他朋友们的专栏

造个轮子之基于 Netty 实现自己的 RPC 框架

服务端开发都会或多或少的涉及到 RPC 的使用,当然如果止步于会用,对自己的成长很是不利,所以楼主今天本着知其然,且知其所以然的精神来探讨一下 RPC 这个东西...

1173
来自专栏Java呓语

单元测试以及JUnit框架解析

我们都有个习惯,常常不乐意去写个简单的单元测试程序来验证自己的代码。对自己的程序一直非常有自信,或存在侥幸心理每次运行通过后就直接扔给测试组测试了。然而每次测试...

772
来自专栏IT笔记

Ehcache配置详解及CacheManager使用

timeToIdleSeconds 当缓存闲置n秒后销毁 timeToLiveSeconds 当缓存存活n秒后销毁 缓存配置 name:缓存名称。 ...

3175
来自专栏SDNLAB

OpenDaylight开发-DataStoreChange监听器三种类型

OpenDaylight中的所有数据都保存在DataStore中,并且数据以树形结构存储,可参考OpenDaylight开发中的介绍。外界对DataStore的...

32710
来自专栏Java成神之路

Android之 学习路线

1.Java基本数据类型与表达式,分支循环。  2.String和StringBuffer的使用、正则表达式。  3.面向对象的抽象,封装,继承,多态,类与...

681
来自专栏微信公众号:Java团长

SSM框架——实现分页和搜索分页

分页是Java Web项目常用的功能,昨天在Spring MVC中实现了简单的分页操作和搜索分页,在此记录一下。使用的框架为(MyBatis+SpringMVC...

1074
来自专栏偏前端工程师的驿站

实现滑动分页(微博分页方式)

  现在大家都在上微博,而微博的滑动分页引起了我的兴趣,于是自己模仿着做,以下是这段时间的成果(单纯实现,没有考虑到效率和其他细节问题)   实现内容:以30条...

1729
来自专栏Create Sun

基础拾遗------------依赖注入

前言   好久没有写微博了,因为前段时间由于家庭原因决定从工作了3年多的北京转移到上海去。依赖注入在学习net core的时候也有写过类似的东西,只是实践的较少...

34910
来自专栏积累沉淀

Java面试笔试题大汇总(最全+详细答案)

声明:有人说, 有些面试题很变态,个人认为其实是因为我们基础不扎实或者没有深入。本篇文章来自一位很资深的前辈对于最近java面试题目所做的总结归纳,有170道题...

3.6K11

扫码关注云+社区