jQuery中Animate进阶用法(三)】的更多相关文章

jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解jQuery API中animate的详细用法. animate( properties [, duration ] [, easing ] [, complete ] ) 返回jQuery对象 描述: 根据一组 CSS 属性,执行自定义动画. 1.animate( properties [, dur…
progressType: Function( Promise animation, Number progress, Number remainingMs )每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数.(version added: 1.8) Number progress表示当前动画进展程度0~1  Number remainingMs 就是变化到最终动画属性值还差多少 CSS .block { position: relative; backgroun…
Step Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数.这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值. 这个是如此的模糊,让我们看下实例吧! var k=0; $( ".block:first" ).animate( { left: 100,top:200 }, { duration: 1000, step: function( now, fx ){ k++; if(k==1) consol…
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如:  代码如下: $("div").animate( {width:"1000px"})   以上代码能够将div从原有的宽度调整到1000px.也可以一次性使用…
本文实例讲述了jQuery中attr()方法用法.分享给大家供大家参考.具体分析如下: 此方法设置或返回匹配元素的属性值. attr()方法根据参数的不同,功能也不同. 语法结构一: 获取第一个匹配元素指定属性的属性值. 代码如下: $(selector).attr(name) 参数列表: 参数 描述 name 定义要获取其值的属性名称. 实例代码: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="…
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本文实例分析了jQuery on()方法的用法.分享给大家供大家参考.具体分析如下: 一.jQuery on()方法的使用:   on(events,[selector],[data],fn)   events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"k…
本文实例讲述了jQuery中index()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以搜索匹配元素,并返回元素的索引值.索引值是从0开始的. 语法结构一: 当此方法没有参数的时候,返回值是指定元素在其同辈元素集合中的索引位置. 复制代码代码如下: $(selector).index() 实例代码: 实例一: 复制代码代码如下: <!DOCTYPE HTML><html><head><meta charset="utf-8"/>…
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能.定义及在匹配元素上绑定一个或者多个事件处理函数的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery中on()方法用法.分享给大家供大家参考.具体分析如下: 此方法可以在匹配元素上绑定一个或者多个事件处理函数.使用off()方法可以删除on()方法绑定的事件. 语法结构一: $(selector).on(events,[selector],[data],fn) 参数列表: 参数 描述 events 一个或多个用…
本文实例讲述了jQuery中eq()方法用法.分享给大家供大家参考.具体分析如下: 此方法能够获取匹配元素集上的相应位置索引的元素. 匹配元素集上元素的位置索引是从0开始的. 语法结构: 复制代码 代码如下: $(selector).eq(index) 参数列表: 参数 描述 index 定义元素在元素集中的索引,从零开始的. 如果是负数则从最后一个元素往回计数. 越界无效. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE HTML> <html> <head…
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.…
jQuery中each的用法之退出循环和结束本次循环 jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用return, break           用return false continue      用return ture…
jQuery中$.each的用法   本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用. jQuery中通过$.each,你可以遍历对象.数组的属性值并进行处理. 使用说明 1.遍历对象(有附加参数) $.each(Object, function(p1…
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在…
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方法能够去w3school查看.这里主要说一下: $("body").animate({"scrollTop":top}) 不被Firefox支持问题的解决. 事实上是使用body的: $("body").animate({"scrollTo…
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的所有内容,包括它本身,所有绑定的事件.附加的数据等都会删除 detach():临时删除页面上的所有元素包括它本身,所有绑定的事件.附加的数据等都会保留下来 官方解读:这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.与remove()不同的是,所有绑定的事件.附加的数据等都…
jQuery中的end()方法的意思 选取某个元素,查找选取其子元素,然后再回过来选取这个元素.用例子说明了一下: 比如HTML代码: <p><span>Hello</span>,how are you?</p> JQuery代码: $("p").find("span").end(); 结果还是返回元素"P": [ <p><span>Hello</span> ho…
extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实现一样,但功能用法却不一样,按照官方解释: jQuery.extend(): Merge the contents of two or more objects together into the first object.(把两个或者更多的对象合并到第一个当中) jQuery.fn.extend(…
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法.换句话 说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用.而jQuery对象提供的each方法则是对jQuery内 部的子元素进行逐个调用. each函数根据参数的类型实现的效果不完…
一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) {        return $(this).hasClass('external');    }) 二.Jquery中find与filter区别 1.find()会在div元素内 寻找 class为classname的元素.2.filter()则是筛选div的class为classname的元素.3.基本是f…
一:页面载入 ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度.简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行.有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中.可以给这个参数任意起一个名字,并因此可以不再…
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示. 使用 AJAX 的应用程序案例:谷歌地图.腾讯微博.优酷视频.人人网等等. 关于 jQuery 与 AJAX jQuery 提供多个与 AJAX 有关的方法. 通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本…
语法结构一: 复制代码代码如下: $(selector).data(name,value) 参数列表: 参数 描述 name 存储的数据名称. value 将要存储的任意数据. 实例代码: 复制代码代码如下: <!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.jb51.net…
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight而不是 margin-right,等等. css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性: * backgroundPosition * bo…
each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等在javaScript开发过程中使用$each可以大大的减轻我们的工作量. 下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); a…
一.前言 1. Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其中this “指针”就是实现面向对象的一个很重要的特性.但是this也是Javascript中一个非常容易理解错,进而用错的特性. 2.this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象. 二.进入正题 1.全局代码中的——this 1. 浏览器宿主的全局环境…
摘要 jQuery对象: 具有jquery框架设置的所有功能的调用者, 就是该框架的对象 $又是什么?: $就是jQuery对象, jQuery对象为window的全局属性, 所以可以直接使用 如何自定义jQuery对象: 如用 JQ 替换 jQuery | $ var JQ = jQuery.noConflict(); //这是jquery源码中提供的方法 JQ('.box').html("<b>哈哈</b>"); jQuery(selector,contex…
一.查找节点    [返回jQuery对象]$(选择器字符串);    使用jQuery函数,里面参数为选择器字符串,查询符合条件的BOM对象并返回jQuery对象eg: $('div.one span:first'); //查询所有类名为one的div里面的所有后代span里面的第一个span元素 二.创建节点$(HTML文本字符串);使用jQuery函数,里面参数为要创建的节点字符串,返回jQuery对象eg: var $newNode = $("<span>hello<s…
.each()方法的两个简单例子 用法1. <script type="text/javascript"> $("#dianji").click(function(){ var attr = [ "one", "two", "three", "four"]; $.each(attr, function(){ //遍历数组attr中的每一项 alert(this); }); /…
push定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) 参数 描述 newelement1 必需.要添加到数组的第一个元素. newelement2 可选.要添加到数组的第二个元素. newelementX 可选.可添加多个元素. 返回值 把指定的值添加到数组后的新长度. 说明 push() 方法可把它的参数顺序添加到 arrayObjec…
描述: 从匹配的元素集合中移除指定的元素. 如果提供的jQuery对象代表了一组DOM元素,.not()方法构建一个新的匹配元素的jQuery对象,用于存放筛选后的元素.所提供的选择器是对每个元素进行测试;如果元素不匹配的选择将包括在结果中. 从jQuery 1.4开始,.not()方法可以接受一个函数作为参数,这和.filter()方式是一样.如果该函数返回 true,那么当前元素就不会包含在结果中. <ul> <li>list item 1</li> <li&…