jquery动画

jQuery动画详解

99封情书 提交于 2020-03-01 11:25:44
千锋逆战班,停课不停学! 1.隐藏显示 (1)运动轨迹:都是从左上角开始动画,显示是从左上角开始显示,隐藏是向左上角隐藏 (2)参数: 参数1 : 毫秒 也就是动画的执行时间 参数2 : 运动的方式 linear 线性 参数3 : 回调函数 当运动结束时,执行的函数程序 (3)显示隐藏与切换 标签对象.show() — 让隐藏的标签,显示 标签对象.hide() — 让显示的标签,隐藏 标签对象.toggle() —切换:隐藏—>显示 显示—>隐藏 注:只能是 display: none;不能是透明度为 0 相应代码: <style> button { display : block ; margin : 0px auto 20px ; } div { width : 200px ; height : 200px ; background : pink ; margin : 0 auto ; display : none ; } </style> <body> <button name="block">点我出现</button><br> <button name="none">点我消失</button><br> <button name="toggle">点我切换</button><br> <div></div> </body> <script src="./jquery.min

jQuery动画实现闪烁效果

橙三吉。 提交于 2020-02-29 22:15:51
知识点 fadeto() 代码 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < style > #box { height : 200 px ; width : 200 px ; margin : 200 px ; border - radius : 50 % ; background - color : red ; } < / style > < / head > < body > < div id = "box" > < / div > < script type = "text/javascript" src = "lib/jquery-3.3.1.js" > < / script > < script type = "text/javascript" > $ ( function ( ) { var opacity = 1 ; var timer = setInterval ( function ( ) { if ( opacity <= 0 ) { opacity = 1 ; } opacity -= 0.1 ; $ ( '#box' ) . fadeTo ( 10 , opacity ) ; } , 100

JQuery加载列表实现动画滚动(自上而下挤)

空扰寡人 提交于 2020-02-29 06:28:46
  这个例子是jquery动态加载列表,并通过定时刷新,实现其循环滚动效果的一个例子。 1、HTML代码: <div class="fake-table"> <li class="fake-table-hr"> <span>姓名</span> <span>地点</span> <span>联系方式</span> </li> <div class="table-wrap"> <ul id="J_Table"> </ul> </div> </div> 2、CSS代码: .fake-table { position: relative; height: 140px; font-size: 14px; list-style: none; } .table-wrap { height: 120px; overflow: hidden; } .table-wrap ul { position: rerlative; } .fake-table li { width: 500px; height: 20px; margin: 0 auto; line-height: 20px; border: 1px solid #0B519D; background-color: rgba(24, 65, 157, 0.25); border-top: none; } .fake-table li.fake

给初自学JavaScript的5点建议

廉价感情. 提交于 2020-02-29 03:50:31
1、对初学者而言,看视频会比看书效率要高得多,因为视频中会展示完整的代码,有助于初学者快速上手。免费视频推荐B站,自学网 2、一定要多敲代码。有个笑话是这么说的:眼睛说:我看懂了;手说:第一句代码怎么敲来着?所以说,光看是不够的,可以边看边敲,刚开始不理解也没关系,先抄下来,然后再慢慢去理解消化。 3、如果你只是想会用JavaScript就可以了,那么可以学jquery,因为jquery对初学者非常友好,甚至不会js都没有太大的关系。如果想要了解得更深入些或者你的学习能力比较强,建议从JavaScript学起,有需要的时候再学jquery。 4、不要盲目追求新技术,只有当你掌握了基础,其他的对你来说都是易如反掌。 5、学习顺序: a. 熟悉基本概念:变量,数据类型,函数,运算符,表达式,对象(自定义对象,内置对象)。这些基本概念一定要熟悉,熟悉到什么程度,看见一个概念,立刻就能写出示例代码,就够了。 b. 熟悉DOM:树状结构,节点分类,添加节点,删除节点,修改属性,绑定事件。 c. 熟悉jQuery:选择器、操作属性和样式、绑定事件、节点操作、动画方法。 d. 用jQuery实现网页上看到的页面效果,比如轮播图,菜单的各种效果,返回顶部等。 e. 试着用原生的js实现jQuery的常用方法。比如addClass,removeClass,index这些。 总结:饭要一口口吃

jquery点击控制动画暂停开始

北战南征 提交于 2020-02-27 04:25:43
一下是从w3c上面考下来了的, animation :[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]* 独立属性 [ animation-name ]:检索或设置对象所应用的动画名称 [ animation-duration ]:检索或设置对象动画的持续时间 [ animation-timing-function ]:检索或设置对象动画的过渡类型 [ animation-delay ]:检索或设置对象动画延迟的时间 [ animation-iteration-count ]:检索或设置对象动画的循环次数 [ animation-direction ]

普通和苗条的jquery包有什么区别?

蓝咒 提交于 2020-02-26 13:18:53
在 CDNJS 处放置了jquery.slim包。 尺寸较小。 与原版的主要区别是什么? 快速浏览一下代码并没有找到答案,在jquery.com上我还没有找到有关 slim 包装的参考。 那么,jquery.js和jquery.slim.js有什么区别? #1楼 查看代码,我发现jquery.js和jquery.slim.js之间存在以下差异: 在jquery.slim.js中,删除了以下功能: jQuery.fn.extend jquery.fn.load jquery.each //附加一堆函数来处理常见的AJAX事件 jQuery.expr.filters.animated 像jQuery.ajaxSettings.xhr,jQuery.ajaxPrefilter,jQuery.ajaxSetup,jQuery.ajaxPrefilter,jQuery.ajaxTransport,jQuery.ajaxSetup之类的ajax设置 像jQuery.parseXML一样进行xml解析, 动画效果,例如jQuery.easing,jQuery.Animation,jQuery.speed #2楼 这时,最权威的答案似乎是在 本期中 ,它指出“这是jQuery的自定义版本,不包括效果,ajax和不推荐使用的代码”。 详细信息将在jQuery 3.0中宣布。

前端基础JQuery

无人久伴 提交于 2020-02-26 05:10:00
JQuery对象是通过JQquery包装DOM对象后产生的对象。JQuery对象是JQuery独有的。如果一个对象是JQuery对象,那么它就可以使用JQuery中的方法。 $("#test").html(); 获取ID为test的元素内的html代码 DOM实现代码:document.getElementById("test").innerHTML; 虽然JQuery对象是DOM对象包装后产生的,但是JQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用JQuery中的方法 约定如果获取的是JQuery对象,那么要在变量前加$ var $variable=JQuery对象 var variable=DOM对象 $variable[0]:JQuery对象转为DOM对象$("#test")[0].innerHTML; 选择器   基本选择器 $("*") 通配 $(#id") ID $(".class") 类 $("element") 标签 $(".class,p,div") 多个元素   层级选择器 $(".outer div") .outer所有div后代 $(".outer>div") .outer所有子代div $(".outer+div") .outer毗邻div标签 $(".outer~div") .outer普通兄弟div标签   基本选择器 $("li

前端学习之jquery

喜欢而已 提交于 2020-02-26 05:08:43
一 jQuery是什么? <1> jQuery 由美国人 John Resig 创建,至今已吸引了来自世界各地的众多 javascript 高手加入其 team 。 <2>jQuery 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是 ——WRITE LESS,DO MORE ! <3>它是轻量级的 js 库 ( 压缩后只有 21k) ,这是其它的 js 库所不及的,它兼容 CSS3 ,还兼容各种浏览器 ( IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ )。 <4>jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents 、 events 、实现 动画效果,并且方便地为网站提供 AJAX 交互。 <5>jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件 可供选择。 二 什么是 jQuery 对象? jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。 jQuery 对象是 jQuery 独有的 . 如果一个对象是 jQuery 对象 , 那么它就可以使用 jQuery 里的方法 : $(“#test”).html(); $("#test").html() //意思是指

前端 jQuery

荒凉一梦 提交于 2020-02-26 05:08:26
一、jQuery是什么? <1>jQuery由美国人John Resig创建,至今已吸引了来自世界各地众多JavaScript高手加入其team。 <2>jQuery是继prototype之后又一个优秀的JavaScript框架。其宗旨是——WRITELESS,DO MORE! <3>它是轻量级的js库(压缩后只有21k),这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 <4>jQuery是一个快速的,简洁的JavaScript库,使用户能更方便地处理HTMLdocument、events、实现动画效果,并且方便地为网站提供AJAX交互。 <5>jQuery还有一个比较大的优势,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。 二、什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法: $(“#test”).html(); $("#test").html() //意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; /

jQuery入门简述

余生长醉 提交于 2020-02-26 04:58:31
jQuery 是一套快速的,简洁的 javaScript 脚本库,jQuery 由美国人 John Resig 创建,至今已吸引了来自世界各地的众多 javaScript 高手加入其组织,使用户能更方便地处理 HTML documents、events、实现动画效果, jQuery 还提供了大量插件,并且方便地为网站提供 AJAX 交互,jQuery 能够使用户的 HTML 页保持代码和 HTML 内容分离,也就是说,不用再在 HTML 里面插入一堆 JS 来调用命令了,只需定义 id 即可,它是轻量级的 JS 库(压缩后只有 80+k) ,这是其它的 JS 库所不及的,它兼容 CSS3,还兼容各种浏览器 (IE 6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+) 目前网络上有大量开源的 JS 框架,jQuery 是继 prototype 之后又一个优秀的 JavaScript 框架,jQuery 是目前最流行的 JS 框架,其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情,很多大公司都在使用 jQuery jQuery 安装: 从官网 http://www.jquery.com 下载 jQuery 库,并导入到 JS 文件就可以使用了 jQuery 使用: jQuery 语法是通过选取 HTML 元素,并对选取的元素进行操作