jquery动画 | 易学教程

jQuery-动画 animate() hide() show() toggle() fadeT0() slideToggle()

阅读更多关于 jQuery-动画 animate() hide() show() toggle() fadeT0() slideToggle()

弹出层：点击按钮出现弹出层，点击弹出层本身或者网页任意处弹出层消失。注，点击按钮时要取消冒泡event.stopPrepagation();设置弹出层的位置$(event.target).offset().top+'px', $(event.target).offset.left+'px' 　　$('#divPop').show()显示弹出层。点击网页任意处关闭弹出层$(document).click(function(event){$('#divPop').hide()}); js： $(function(){ var speed=500; $('#btnShow').click(function(event){ event.stopPropagation(); var offset=$(event.target).offset(); $("#divPop").css({top:offset.top+$(event.target).height()+'px',left:offset.left+'px'}); $('#divPop').toggle(speed); }); $(document).click(function(event){$('#divPop').hide(speed);}); $('#divPop').click(function(event){$(this)

jquery animate 动画效果使用解析

阅读更多关于 jquery animate 动画效果使用解析

animate的意思是：使有生气；驱动；使栩栩如生地动作；赋予…以生命作为形容词：有生命的；活的；有生气的；生气勃勃的先看动画效果： http://keleyi.com/keleyi/phtml/jquery/index.htm animate()在jquery中作为一个方法，可用于创建动画效果以下是实例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery animate动画--柯乐义</title><base target="_blank" /> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("button#bGo_kel"+"eyi_com").click

jquery知识点梳理

阅读更多关于 jquery知识点梳理

jQuery 知识点梳理一、 jquery选择器基本选择器 ID选择器类选择器标记选择器分组选择器通配符选择器层次选择器 $(“ancestor descendent”)：祖先后代选择器空格 $(“parent > child”)：父子选择器大于 $(“prev + next”)：相邻后兄弟元素选择器加号 $(“prev ~ siblings”)：所有后兄弟元素选择器波浪线过滤选择器：基本过滤选择器：first、:last、:odd、:even、:eq(index)、:gt(index)、：lt(index)、not(selector) 过滤选择器：内容过滤选择器 :contains(text)、:empty、:parent、has(selector) 过滤选择器：可见性过滤选择器：visible、:hidden 过滤选择器：属性过滤选择器 [attribute]、[attribute=value]、[attribute!=value]、[attribute^=value]、[attribute$=value]、[attribute*=value] 过滤选择器：表单过滤选择器 :checked、:selected :text、：password、:radio、:checkbox、:submnit、:button、:image、:reset、:file、

JQuery基础

阅读更多关于 JQuery基础

JQuery官方网站 http://jquery.com/ 1 、 JQuery 概念 A、Jquery是一个优秀的Javascript框架。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。 B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。 C、JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。 D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js放在同目录下，VS2008中才会有自动提示和自动完成功能。 E、JQuery文件说明:

jquery动画，获取，添加

阅读更多关于 jquery动画，获取，添加

动画： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>stop实验测试</title> <script src="../js/jquery-1.4.2.js"></script> <script src="../js/jquery-1.8.3.min.js"></script> <script> /* * jQuery 动画 - animate() 方法 * jQuery animate() 方法用于创建自定义动画。 * 语法：$(selector).animate({params},speed,callback); * 必需的 params 参数定义形成动画的 CSS 属性。 * 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 * 可选的 callback 参数是动画完成后所执行的函数名称。 */ $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); $("#stop").click(function(){ $("div")

JQuery一些简单常用的方法

阅读更多关于 JQuery一些简单常用的方法

申请了博客，却不知道写点啥，因为本人是一只菜鸟，所以也不敢在各位大虾们面前show一些皮毛的小东东，现在也顾不了那么多了，我就是想在这里做一些学习用的笔记，呵呵。希望各位师傅们莫要见笑，以后多多希望各位指教。最近在学习JQuery。因为在以后的工作中可能要用到，由于刚学习不久，了解的也只是一些皮毛的东西，但是好记性不如把它记录下来，因此今天有兴在这里总结了一下，各位不要见笑哦！ JQuery实际上就是对js的一个封装我认为，是一个JavaScript函数库，此函数库主要包括的有： ~Html元素选取 ~Html元素操作 ~CSS操作 ~HTML时间函数 ~JavaScript特效和动画 ~HTML DOM遍历和修改 ~Ajax ~Utilities 在使用JQuery的过程中，怎样使用呢，首先要向页面中添加JQuery库 JQuery库位于js文件中，可以通过下面的标记将把JQuery添加到网页中 <head> <script type="text/javascript" src="jquery.js"></script><!--注意一定要放到head标签中> </head> 引入了库，下面就是一些简单的用法了，首先来记录几个简单的常用的实例。 1.JQuery的hide（）函数，隐藏了html文档中的所有元素 <html> <head> <script type="text

jQuery动画效果

阅读更多关于 jQuery动画效果

jQuery动画效果 1、元素的显示和隐藏 display:none; 隐藏 display:block; 显示 a) show() 显示 b) hide() 隐藏 c) toggle() 开关，显示则隐藏，隐藏则显示 <script type="text/javascript"> function f1(){ //隐藏 $("div").hide();//display:none //document.getElementById('id').style.display="none"; } function f2(){ //显示 $("div").show();//display:block } function f3(){ $("div").toggle(); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style> <body> <div>duck and dog</div> <input type="button" value="隐藏" onclick="f1()" /> <input type="button" value="显示" onclick="f2()" /> <input type="button" value=

jQuery入门

阅读更多关于 jQuery入门

jQuery是什么说白了jQuery是一个js库当然了除了这个库之外，我们还有跟多的库，比如：Prototype、YUI、Dojo、Ext JS、移动端的zepto等目的就简洁的，快速的开发学习jQuery本质：就是学习调用这些函数（方法）。 1.jQuery的优点轻量级。核心文件才几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持，大大简化了DOM操作。支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。免费、开源。 2.jQuery如何使用呢？首选你要去下载在你的scrpit标签中（末尾）引入这个文件，当然了你也可以在加载的时候在页面头部引入,比如你使用windows.load.....，不过在jquer中有更好的解决方案最简单的使用 $('div').hide(),//隐藏盒子特别要说明的一点是：jQuery有一些兼容的小问题，但.....你不用去管它 3.正式的开始使用它 3.1入口函数这个就是一个人入口函数，相当于 DOMContentLoaded等待dom结构加载完再去执行js代码 // 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口 }) ; // 第二种: 繁琐，但是也可以实现 $

jQuery之动画效果

阅读更多关于 jQuery之动画效果

jQuery之动画效果 1、show()显示效果　　语法：show(speed,callback)　　Number/String,Function　speend为动画执行时间，单位为毫秒。也可以为slow","normal","fast"　callback可选,为当动画完成时执行的函数。　　　　 show(speed,[easing],callback)　　Number/String　　easing默认是swing,可选linear; 　　　　　$("#div1").show(3000,function(){ alert("动画显示完成!"); });　　　　　　 2、hide()隐藏效果　　语法:hide(speed,callback)　　Number/String,Function 　　　　 hide(speed,easing,callback)　　Number/String 　　　　 $("#div1").hide(3000,function(){ alert("动画隐藏完成") }); 3、toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示　　语法：toggle(speed,callback)　　Number/String,Function 　　　　 toggle(speed,callback)　　Number/String,String

jQuery Easing 使用方法及其图解

阅读更多关于 jQuery Easing 使用方法及其图解

从 jQuery API 文档中可以知道，jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数： properties：一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选)：动画执行时间，其值可以是三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) easing(可选)：要使用的过渡效果的名称，如："linear" 或"swing" complete(可选)：在动画完成时执行的函数其中参数easing默认有两个效果："linear"和"swing"，如果需要更多效果就要插件支持了， jQuery Easing Plugin 提供了像"easeOutExpo"、"easeOutBounce"等30多种效果，大家可以点击这里去看每一种easing的演示效果，下面详细介绍下其使用方法及每种easing的曲线图。引入之后，easing参数可选的值就有以下32种： linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart

订阅 jquery动画