jQuery编程动画的基本方法示例详解

目录
  • 一、动画
    • .show()
    • .hide()
    • .fadeIn()
    • .fadeOut()
    • .animate()
    • .slideDown()
    • .slideUp()
    • .delay()
    • .clearQueue()
    • .fadeTo()

一、动画

jQuery提供了一些列的动画基本方法，同时也提供了自定动画方案.animate()。

.show()

当提供一个 duration（持续时间）参数，.show()成为一个动画方法。.show()方法将为匹配元素的宽度，高度，以及不透明度，同时进行动画操作。

持续时间是以毫秒为单位的，数值越大，动画越慢，不是越快。字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。

出了上述时间，还可以自定时间，接受毫秒为参数

jQuery默认只提供两个缓冲效果：调用 swing, 在一个恒定的速度进行；调用 linear. 更多的缓动函数要使用的插件

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

.hide()

$("#hidr").click(function () {
  $("div").hide(1000);
});

.fadeIn()

通过淡入的方式显示匹配元素。

$(document.body).click(function () {
  $("div:hidden:first").fadeIn("slow");
});

.fadeOut()

通过淡出的方式显示匹配元素。

$("p").fadeOut("slow");

.animate()

$("#go").click(function(){
  $("#block").animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});

.slideDown()

用滑动动画显示一个匹配元素。

$("div").slideDown("slow");

.slideUp()

$(document.body).click(function () {
    if ($("div:first").is(":hidden")) {
        $("div").show("slow");
    } else {
        $("div").slideUp();
    }
});

.delay()

设置一个延时来推迟执行队列中后续的项。

$("div.first").slideUp(300).delay(800).fadeIn(400);

.clearQueue()

从列队中移除所有未执行的项。

$("#start").click(function () {
    $("div").slideUp(300).delay(800).fadeIn(400);
})
$("#stop").click(function () {
  var myDiv = $("div");
  myDiv.clearQueue();
  myDiv.stop();
});

.fadeTo()

调整匹配元素的透明度。

透明度的值为：0～1

$(this).fadeTo("fast", Math.random());

以上就是jQuery编程动画的基本方法示例详解的详细内容，更多关于jQuery编程动画方法的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • jQuery实现带展开动画的导航栏效果

    jQuery实现带展开动画的导航栏效果

    设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码 完成一个完全自己设计的导航栏. HTML写布局,CSS写样式,JS写动画效果和事件响应等,考虑到JQuery对DOM操作的便利性,这里选择用JQuery可以达到事半功倍的效果. 设计: 如果觉得自己下载的一些导航栏插件太千篇一律了,那么就设计一个自己喜欢的导航栏.可以先拿张纸画画自己希望要一个什么样的导航最终想要达到什么样的效果. 比如

  • jQuery实现广告显示和隐藏动画

    jQuery实现广告显示和隐藏动画

    我们经常会看到几秒后出现了广告,显示了几秒后广告就消失了,下面就用JQuery框架来实现这个功能. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>广告的自动显示与隐藏</title> <style> #content{width:100%;height:500px;background:#999} </style

  • 详解jQuery的animate动画方法及动画排队问题解决

    详解jQuery的animate动画方法及动画排队问题解决

    animate()动画方法 作用:执行css属性集的自定义动画 语法:$(selector).animate(styles,speed,easing,callback) • 参数1: css 的属性名和运动结束位置的属性值的集合. • 参数2:可选,规定动画的速度,默认是 "normal".其他值,"slow"."normal"."fast",数字格式,单位为毫秒. • 参数3:可选,规定在不同的动画点中设置动画速度的 eas

  • Jquery如何使用animation动画效果改变背景色

    Jquery如何使用animation动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只能动态改变数值型的参数,例如:top,left,width,height...等等 好像网上也有说要装一个 "jquery.ui" 的插件之类的.但是博主我实在不想引入过多的插件, 且恰好本人掌握的CSS比较好一点点, 所以就想了下面这么个法子. 但好在 CSS 它自带的

  • 一篇文章带你了解jQuery动画

    目录 1.控制元素的显示与隐藏 show() hide() 2.控制元素的透明度 fadeIn() fadeOut() 3:控制元素的高度 slideUp() slideDown() 总结 jQuery提供了一些默认的动画 控制元素的显示与隐藏 show() hide() 控制元素的透明度 fadeIn() fadeOut() 控制元素的高度 slideUp() slideDown() 自定义动画 animate() 1.控制元素的显示与隐藏 show() hide() 语法:   $("sel

  • jQuery实现移动端下拉展现新的内容回弹动画

    jQuery移动端下拉展现新的内容动画回弹,供大家参考,具体内容如下 jquery的方法,写的比较细,可以改成原生的这里就不做修改了, 话不多说上代码, 也可以改成下拉刷新 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale

  • JQuery实现隐藏和显示动画效果

    JQuery实现隐藏和显示动画效果

    本文为大家分享了JQuery实现隐藏和显示动画效果的具体代码,供大家参考,具体内容如下 隐藏和显示 语法 $(selector).fadeIn([speed,callback]); $(selector).fadeOut([speed,callback]); $(selector).fadeToggle([speed,callback]); 参数说明: 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"."fast" 或毫秒. 可选的 call

  • jQuery编程动画的基本方法示例详解

    目录 一.动画 .show() .hide() .fadeIn() .fadeOut() .animate() .slideDown() .slideUp() .delay() .clearQueue() .fadeTo() 一.动画 jQuery提供了一些列的动画基本方法,同时也提供了自定动画方案.animate(). .show() 当提供一个 duration(持续时间)参数,.show()成为一个动画方法..show()方法将为匹配元素的宽度,高度,以及不透明度,同时进行动画操作. 持续

  • Python面向对象编程repr方法示例详解

    目录 为什么要讲 __repr__ 重写 __repr__ 方法 str() 和 repr() 的区别 为什么要讲 __repr__ 在 Python 中,直接 print 一个实例对象,默认是输出这个对象由哪个类创建的对象,以及在内存中的地址(十六进制表示) 假设在开发调试过程中,希望使用 print 实例对象时,输出自定义内容,就可以用 __repr__ 方法了 或者通过 repr() 调用对象也会返回 __repr__ 方法返回的值 是不是似曾相识....没错..和 __str__ 一样的

  • python编程开发时间序列calendar模块示例详解

    python编程开发时间序列calendar模块示例详解

    目录 calendar模块 设置每周第一天-setfirstweekday 1.默认情况:礼拜一是第一天 2.设置任意一天 是否闰年-isleap 年份间的闰年数-leapdays(y1, y2) 星期几-weekday(year, month, day) monthrange(year, month) 月的日历矩阵-monthcalendar(year, month) 月的日历-prmonth(year, month, w, l) 年的日历-calendar.calendar(year) 格式

  • Go编程库Sync.Pool用法示例详解

    目录 场景 用法 创建 GET & PUT 优化 Log 函数 性能测试 场景 go 如果频繁地创建.销毁对象(比如 http 服务的 json 对象,日志内容等),会对 GC 造成压力.比如下面的 Log 函数,在高并发情况下,需要频繁地创建和销毁 buffer. func Log(w io.Writer, key, val string) { b := new(bytes.Buffer) // 按一定的格式打印日志,这一段不是重点 b.WriteString(time.Now().UTC()

  • Go语言中的字符串处理方法示例详解

    1 概述 字符串,string,一串固定长度的字符连接起来的字符集合.Go语言的字符串是使用UTF-8编码的.UTF-8是Unicode的实现方式之一. Go语言原生支持字符串.使用双引号("")或反引号(``)定义. 双引号:"", 用于单行字符串. 反引号:``,用于定义多行字符串,内部会原样解析. 示例: // 单行 "心有猛虎,细嗅蔷薇" // 多行 ` 大风歌 大风起兮云飞扬. 威加海内兮归故乡. 安得猛士兮守四方! ` 字符串支持转义

  • 编译安装redisd的方法示例详解

    安装方法: yum安装 查看yum仓库redis版本 [root@centos ~]# yum list redis Loaded plugins: fastestmirror, langpacks Loading mirror speeds from cached hostfile Available Packages redis.x86_64 3.2.12-2.el7 myepel yum安装 [root@centos ~]# yum install redis -y 启动服务并设为开机启动

  • VSCode各语言运行环境配置方法示例详解

    系统环境变量的配置 如:将F:\mingw64\bin添加到系统环境变量Path中 VSCode软件语言json配置C语言 创建个.vscode文件夹,文件夹内创建以下两个文件 launch.json 文件配置 { "version": "0.2.0", "configurations": [ { "name": "(gdb) Launch", "type": "cppdbg&

  • 浅谈使用Java Web获取客户端真实IP的方法示例详解

    Java-Web获取客户端真实IP: 发生的场景:服务器端接收客户端请求的时候,一般需要进行签名验证,客户端IP限定等情况,在进行客户端IP限定的时候,需要首先获取该真实的IP. 一般分为两种情况: 方式一.客户端未经过代理,直接访问服务器端(nginx,squid,haproxy): 方式二.客户端通过多级代理,最终到达服务器端(nginx,squid,haproxy): 客户端请求信息都包含在HttpServletRequest中,可以通过方法getRemoteAddr()获得该客户端IP.

  • PHP基于phpqrcode类生成二维码的方法示例详解

    HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址: http://phpqrcode.sourceforge.net/ 下载官网提供的类库后,只需要使用phpqrcode.php就可以生成二维码了,当然您的PHP环境必须开启支持GD2. phpqrcode.php提供了一个关键的png()方法,其中 参数$text表示生成二位的的信息文本: 参数$outfile表示是否输出二维码图片 文件,默认否: 参数$level表示容错率,

  • golang编程开发使用sort排序示例详解

    golang sort package: https://studygolang.com/articles/3360 sort 操作的对象通常是一个 slice,需要满足三个基本的接口,并且能够使用整数来索引 // A type, typically a collection, that satisfies sort.Interface can be // sorted by the routines in this package. The methods require that the /

随机推荐