jquery animate、jquery Animate怎么做循环动画 收藏 0

所有jQuery实现动画的方法的总结

有和同行的朋友和同事经常问实现jQuery动画的一些方法，总是喜欢去翻书或者网上找百度手册，在这里，我总结一下，把所有动画方法一一列举出来：

1、基本动画方法：

hide()，show()，fadeIn()，fadeOut()，slideUp()，slideDown()

2、自定义动画方法：

animate()方法，其语法结构为：animate(params,speed,callback);

3、交互动画方法：

语法结构：

toggle(speed,[callback])

slideToggle(speed,[easing],[callback])

fadeTo(speed,opacity,[callback])

fadeToggle(speed,[easing],[callback])

参数说明：params指一个包含样式属性及值的映射；speed指速度参数，可选的；callback指在动画完成时执行的函数

如果大侠有个人建议，欢迎来留言！

文/丁向明

做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833

http://dingxiangming.com

利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)

　　作为一个前端工程师，无论公司是什么行业，无论你做什么端，基本都会遇到一个避不开的动画效果：循环轮播。做轮播并不难，市场上的轮播插件有很多，其中比较著名的是swiper，使用也非常简单。但轮播插件这种东西总归是不灵活的，一些简单的场景还可以应付，比较复杂一点的场景处理起来就比较麻烦了。今天我会全程带大家来写一个循环轮播，用到的技术有：html、css、JavaScript、jQuery，都是前端最基础的技术，有基础又爱学肯学的你一定一听就会，如果不会咋整？那多看几遍。

　　以小米官网的图片轮播为例，实际上千篇一律，好啦，看下图：

　　　好啦，看效果，不要看妹子，虽然妹子长得是很好看啦！

　　无限循环轮播的原理是在展示内容的前后各放一组图片，以无限循环展示3张照片为例，三张图片我给它取名为1.jpg,2.jpg,3.jpg,图片展示分别如下：

　　原理示意图展示：

　　原理其实就是复制两组同样的照片分别放在前面和后面(实际上不用完全复制两组，只需要前面可以看到1.jpg，后面也可以到1.jpg就好了，但这里我为了方便大家理解，就采用这样的方式了)。当点左边按钮，图片轮播到第一张1.jpg时，让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置，注意一定要是瞬间。同理，当点右边按钮时，图片轮播到第三张1.jpg的时候，也让盛放图片的容器瞬间拉回到第二张1.jpg照片的位置。这是实现图片循环轮播的关键，稍后会仔细讲解。

　　html代码：

　　css 代码：

　　页面布局是很重要的一部分内容，它是页面的基石。页面布局写得好实现效果的时候能带来很大的方便。因此这里强调几个应该注意的地方：

　　1. 所有的图片要放在一个很长的容器中，这里是slideImageList，每次移动实际上就是它在相对于他的父元素slideImageContainer而移动，所以需要给slideImageContainer 一个 position:relative 的定位，给 slideImageList 一个 position: absoluete 的定位。

　　2. slideImageList要放在一个比较小的容器中，在这里是slideImageContainer，作用是为了显示你想要显示的区域，注意要加 overflow:hidden 属性，让多余的内容不显示。

　　3. 左右按钮我采用的是iconfont的使用方式，这个比较简单，此处不多加以阐述。不会使用iconfont的同学可以直接贴两个图片或者左右箭头符号在上面。

　　4. 容器slideImageList中的图片要排列在一条直线上，并且初始情况下需要给slideImageList一个left值，因为最开始我们想让第四张照片展示，所以此时的left值为-1800px，要记住这个值，因为我们待会儿要常用到这个值。

　　5. @font-face 是引入 iconfont 相关的资源内容，不使用iconfont的可忽略。

　　接下来看javascript代码：

　　现在着重来分析一下JavaScript的代码，同样有几个关键点需要注意，其中部分我已在代码中注释：

　　1. 全局变量 slideIndex 指的是图片的下标，一共有九张照片，下标从0开始，所以九张照片的下标值分别为0-8，此处我们默认展示第四张照片，所以slideIndex 的初始值置为 3 。另外需要注意的是，slideIndex 是全局变量，所以函数内函数外都可以访问到，并且只初始化一次。

　　2. 局部变量 animateLength 指的是想要 slideImageLists 运动到的位置，注意要加单位，并且需要赋值给 slideImageList 的 left 属性。

　　3. jQuery的 animate 方法 ,详情见下图：

　　接下来完整地分析一下流程，以点击左按钮为例：

　　1. 初始情况下展示第四张图片，下标为 3 。 ( var slideIndex = 3 )

　　2. 给左按钮绑定一个点击事件

　　3. 点击左按钮的时候，想要展示当前照片的前一张，所以图片下标需要减去1 ( slideIndex– )

　　4. 计算 slideImageLists 要移动的位置 （ slideIndex * (-600) + \”px\” ），记得加单位。为什么要乘以 -600 ，首先 600 是一张照片的宽度，上面我们分析过了如果要默认展示第四张照片的话 slideImageLists 的 left 属性值为 -1800px，同理，点击左按钮，想要展示第三张照片，那么此时需要 slideImageLists 的 left 属性值为 -1200px，所以就是 ( 3 – 1 ) * ( -600 ) + \”px\” = -1200px 。

　　5. 利用 animate 来执行动画。将上一步计算出来的值赋值给 slideImageLists 的 left 属性。注意 animate方法本身就是含有过渡的，所以切记不需要在 slideImageLists 上面再加 transtion 属性来实现过渡。

　　6. 实现循环轮播的重点来了。以上步骤实现了轮播，但没有实现循环轮播，回忆我们刚才讲的内容，一共有三组 1.jpg、2.jpg、3.jpg 这张照片，默认展示第四张照片，也就是第二组照片中的 1.jpg ，如果点击左按钮，会分别展示第一组照片中的 3.jpg 、2.jpg、1.jpg , 假设一直点击左按钮，展示到第一张照片，也就是第一组的 1.jpg 的时候，此时图片的下标 slideIndex 的值为 0 。当此时展示的图片的下标 slideIndex 的值为 0 并且执行完这个动画的时候，我们需要做一个操作，将 slideImageLists 的 left 值瞬间改变为 -1800px，这个值我们上面强调过了，是初始情况下展示第四张照片也就是第二组中的 1.jpg 的时候 slideImageLists 的 left 值，并且将当前展示的图片的下标 slideIndex 的值变为 3 。

　　animate有一个非常方便的地方在于他提供了一个回调函数，回调函数在动画执行完之后自己执行。

　　另外，这里还有一个需要格外注意的地方，我们一直强调一定要瞬间将 slideImageLists 拉回到 left 值为 -1800px 的地方，那是因为如果也类似于用animate来实现的话用户会看到一个动画的过程，这是我们不能接受的。所以在瞬间拉回的时候我采用的是jQuery的css方法去改变 left 属性。

　　但是讲到这里，实际上还是有不完美的地方，如果你多次点击按钮，就会发生错乱，此时我们需要做的是在动画的执行过程中点击按钮无效，只有动画结束完成才可以继续点击实现动画。我这里采用的方案是引入一个布尔类型的变量 isClickable，初始值为true，表示初始情况下可点击。当用户点击按钮的时候会进行判断当前 isClickable 的值，如果值为true的时候才会去执行 slideIndex– 的操作，否则会 return false ,不会再执行下面的代码。

　　此时我们来分析一下流程：

　　1. 初始情况下isClickable的值为true，表示当前按钮是可以点击的。

　　2. 此时我们去点击左按钮，isClickable 的值为 true , 会执行slideIndex– 的操作。并且将 isClickable的值设置为 false，表示现在已经处在动画中。此时再去点击左按钮就无法再执行slideIndex–的操作，而是进入 return false，终止当前代码。

　　3. 需要注意的是，我们需要在动画执行完成后，也就是在回调函数中将 isClickable 的值变为 true，所以当动画结束后再点击按钮的时候就可以进行下一次动画了。

　　具体代码如下：

　　以上就是左按钮点击时候的思路，点击右按钮的思路和点击左按钮的思路是一样的，相信聪明的你一定能够一点即通，有问题欢迎大家和我交流。

　　祝工作顺利 ~

jQuery基础回顾——jQuery与Ajax应用

Ajax全称为“Asynchronous JavaScript XML”(异步javaScript和XML)，它并不是指一种单一的技术，而是有机地利用了一系列交互式网页应用相关的技术所形成的结合体。

• 不需要插件的支持

Ajax不需要任何浏览器插件，就可以被绝大多数主流浏览器所支持，用户只需要允许javaScript在浏览器上执行即可。

• 优秀的用户体验

这是Ajax技术的最大优点，能在不刷新整个页面的前提下更新数据，这使得Web应用程序能更为迅速地回应用户的操作。

• 提高Web程序的性能

与传统模式相比，Ajax模式在性能上的最大区别就在于传输数据的方式，在传统模式中，数据提交时通过表单(Form)来实现的，而数据获取是靠全页面刷新来重新获取整页的内容，Ajax模式只是通过XMLHttpRequest对象向服务器提交希望提交的数据，即按需发送。

• 减轻服务器和宽带的负担

Ajax的工作原理相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化，它在客户端创建Ajax引擎，把传统方式下的一些服务器负担的工作转移到客户端，便于客户端资源来处理，减轻服务器和宽带的负担。

Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在Microsoft Internet Explorer 5.0 ActiveX组件中被引入的，之后各大浏览器厂商都以javaScript内置对象的方式来实现XMLHttpRequest对象，虽然大家对它的实现方式有所区别，但是绝大多数浏览器都提供了类似的属性和方法，而且在实际脚本编写方法上的区别也不大，实现的到的效果也基本相同。

jQuery对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，第2层是load()、$.get()和$.post()方法，第3层是$.getScript()和$.getJSON()方法。

1、load()方法

• 远程载入HTML文件

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中，它的结构为：

url:待装入 HTML 网页网址。

data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。

callback:载入成功时回调函数。

等DOM元素加载完毕后，通过单击id为“send”的按钮来调用load()方法，然后将test.html的内容加载到id为“resText”的元素里。

显然，load()方法完成了原本很繁琐的工作，开发人员只需要使用jQuery选择器为HTML片段指定目标位置，然后将要要加载的文件的URL作为参数传递给load()方法即可，当单击按钮后，test.html页面的HTML内容就会被加载并插入对应元素中。

• 筛选载入的HTML文件

上个例子是将test.html页面中的内容都加载到id为“resText”的元素里，如果只需要加载test.html页面内的某些元素，那么可以使用load()方法的URL参数来达到目的，通过为URL参数指定选择符，就可以很方便地从加载过来的HTML文档里筛选出所需要的内容。

load()方法的URL参数的语法结构为“url selector”,注意，URL和选择器之间有一个空格，例如只需要加载test.html页面中class为“para”的内容，可以使用如下代码来完成：

• 传递方式

load()方法的传递方式根据参数data来自动指定，如果没有参数传递，则采用GET方式，反之，则会自动转换为POST方式。

• 回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数（callback），该函数有3个参数，分别代表请求返回的内容、请求状态和XMLHttpRequest对象，jQuery代码如下：

2、$.get()方法和$.post()方法

load()方法通常用来从Web服务器上获取静态的数据文件，然而这并不能体现Ajax的全部价值，在项目中，如果需要传递一些参数给服务器中的页面，那么可以使用$.get()或者$.post()方法（或$.ajax()方法）。

• $.get()

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

示例代码如下：

这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

• $.post()

它与$.get()方法的结构和使用方式都相同，不过它们之间仍然有以下区别。

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给Web服务器，当然，在Ajax请求中，这种区别对用户是不可见的。
2. GET方式对传输的数据有大小限制（通常不能大于2KB），而是用POST方式传递的数据量要比GET方式大得多（理论上不会受限制）。
3. GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等，在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就可以避免这些问题。
4. GET方式和POST方式传递的数据在服务器端的获取也不相同，在jsp中，GET方式的数据可以用Request.QueryString获取，而POST方式可以用Request.Form获取。

上面使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要编写一些复杂的Ajax程序，那么就要用到jQuery中的$.ajax()方法，$.ajax()方法不仅能实现与load()、$.get()和$.post()方法同样的功能，而且还可以设beforeSend(提交前回调函数)、error(请求失败后处理)、success(请求成功后处理)以及complete(请求完成后处理)回调函数，通过这些回调函数，可以给用户更多的Ajax提示信息，另外，还有一些参数，可以设置Ajax请求的超时时间状态等。

3、$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现，它的结构为：

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

settings选项1

settings选项2

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

上一节：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com