`

开发小技巧:jQuery来循环控制一系列的元素对象的行为

阅读更多

日期:2013-4-1  来源:GBin1.com

开发小技巧:jQuery来循环控制一系列的元素对象的行为

在线演示

在jQuery开发中,我们往往需要循环的控制一些元素的行为,比如,动画,或者隐藏/显示,通常我们可以使用jQuery的delay()方法或者Javascript的setTimeout方式来处理。

相关文章可以阅读: 如何使用jQuery让一组HTML对象一个一个淡出?

 

在这篇小技巧中,我们使用arguments.callee这个javascript的属性来完成类似上面的效果,代码如下:

    var item = $('#nav li'),count =0;
    (function() {
    $(item[count++]).animate({top: 40*count, opacity:0.8}, 500, arguments.callee);
    })();

首先定义需要添加效果的元素系列,然后使用匿名方法来定义动画效果,并且使用argument.callee来回调函数方法。

HTML代码

.....

via 极客标签

来源:开发小技巧:jQuery来循环控制一系列的元素对象的行为

0
5
分享到:
评论

相关推荐

    26个Jquery使用小技巧

    `$.preloadImages`函数接收一系列图片URL作为参数,通过循环创建`<img>`元素并设置其`src`属性,从而触发图片的下载过程。这样可以在页面正式显示前就准备好图片资源,提高用户体验。 以上五个技巧仅是“26个Jquery...

    JS和JQuery的知识点和用法总结与分析

    1. **选择器**:jQuery提供了一系列CSS选择器,如ID选择器、类选择器、属性选择器等,用于高效地选取DOM元素。 2. **DOM操作**:jQuery简化了添加、删除和修改HTML元素的操作,如`append()`、`remove()`和`html()`。...

    jquery新闻幻灯片展示(多种)

    - 幻灯片展示:这是一种网页设计技巧,通过自动或用户触发切换,以展示一系列内容,如新闻标题、图片或文章摘要。 2. **jQuery选择器** 在创建新闻幻灯片时,首先需要选取要操作的HTML元素,jQuery提供了丰富的...

    jQuery源码分析系列.pdf

    本文档是一系列关于jQuery源码的深入分析,旨在帮助开发者理解jQuery库的内部工作机制,内容涵盖了从jQuery的整体架构、对象构造、工具函数、异步编程到事件处理、AJAX操作、动画和尺寸处理等多个方面。 首先,对于...

    javaScript

    5. **jQuery特效**:jQuery提供了一系列内置的动画方法,如`fadeIn()`, `slideToggle()`, `animate()`等,这些方法可以轻松创建过渡和动画效果。例如,`fadeIn()`可以让元素淡入视图,`slideToggle()`则能实现元素的...

    图文滚动jQuery跑马灯代码.zip

    4. 动画效果:jQuery提供了一系列方法(如`.animate()`)来创建平滑的动画效果,包括改变元素的位置、大小、透明度等属性。在这个跑马灯代码中,这些方法可能被用来实现元素的滚动动作。 5. 循环播放:跑马灯的典型...

    jQuery3D电影海报焦点图轮播

    1. **HTML结构**:首先,需要在HTML文档中设置一个容器,包含一系列的海报图片作为轮播的元素。每个图片元素通常会被赋予相应的类名或者ID,以便后续通过jQuery进行操作。 2. **CSS样式**:定义海报的初始样式和3D...

    jquery动画背景图片

    jQuery 提供了一系列的动画方法,可以用来改变背景图片,包括淡入淡出、滑动等效果,为网页增添动态魅力。 首先,我们需要理解jQuery的核心概念。jQuery 是一种轻量级的库,它的主要目标是“write less, do more”...

    html+css+js+JQuery前端开发课程

    它由一系列的标签构成,这些标签描述了网页的结构和内容。HTML文档通常包含两大部分:`<head>`和`<body>`。`<head>`部分包含了元信息,如字符集设置(`<meta charset="UTF-8">`)、页面标题(`<title>`),以及可能...

    jQuery旋转广告牌特效.zip

    它通常由一系列图像或内容块组成,通过平滑的过渡效果进行循环展示。 首先,我们要了解jQuery库。jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。其语法简洁易懂,使得...

    北大青鸟S2JavaScript作业

    本作业集旨在通过一系列任务、上机实践、课后作业以及项目实战,帮助学员巩固JavaScript基础知识,提升实际操作能力。 一、JavaScript基础 JavaScript是一种解释型的、弱类型的、基于原型的语言,它具有动态类型、...

    jQuery性能优化指南(1)

    《jQuery性能优化指南》系列文章主要探讨如何提升jQuery代码的执行效率,以达到更好的用户体验。在Web开发中,性能优化是关键,特别是对于用户交互频繁的网页应用,jQuery的高效运用能显著改善页面加载速度和响应...

    图片循环滚动插件

    jQuery简化了JavaScript的使用,提供了一系列方便的API和方法,使得操作DOM(文档对象模型)、处理事件、执行动画以及与服务器进行异步通信变得更加简单。在“基于jquery的图片循环滚动插件”中,jQuery的动画功能被...

    jquery相册浏览特效

    然后,可以利用这些选择器进行一系列操作,如添加样式、绑定事件等。 其次,jQuery的事件处理是构建交互性应用的关键。在这个相册特效中,可能使用了`click()`、`hover()`等事件监听函数,使得用户可以通过点击或...

    javascript的案例demo小练习

    在"javascript的案例demo小练习"中,我们可以预期包含一系列的实例代码,旨在帮助初学者或复习者巩固JavaScript基础知识,理解如何使用JavaScript进行前端开发。这些练习可能涵盖了以下几个方面: 1. **变量与数据...

    jquery结婚电子请柬特效素材.zip

    用户可以通过点击或滑动来浏览一系列的照片,每一张照片都有可能出现不同的过渡效果,如淡入淡出、滑动切换等。这些效果的实现依赖于jQuery的事件监听、DOM操作以及动画效果。开发者可能使用了jQuery的$.each()循环...

    Jquery,js的逐帧动画实现

    "Jquery,js的逐帧动画实现"这一主题涵盖了如何利用这两种强大的库来将一系列静态图像组合成流畅的动画。 首先,逐帧动画的基本原理是通过连续显示不同的图像,每张图像代表动画的一小部分动作,来模拟连续的运动。...

    jquery左右切换幻灯片脚本

    在实现幻灯片切换时,jQuery 提供了一系列方便的方法和事件,使得创建这种交互效果变得简单高效。 首先,我们先理解幻灯片的基本结构。通常,幻灯片包含一个容器(通常是div)来装载所有幻灯片内容,每个幻灯片是一...

    JQuery焦点图、图片轮播【优秀源码】

    在实现焦点图时,jQuery提供了一系列便利的API,如选择器、DOM操作、事件绑定等,使得代码编写更为简洁高效。 **2. 基本结构** 一个简单的jQuery焦点图通常包含以下几个部分: - HTML结构:包括图片容器、图片...

    前端小白入门系列课程完整版

    通过实际开发一个小项目,比如一个简单的个人博客系统或者在线购物网站,你可以更好地理解前端开发的流程,掌握前后端协作、版本控制(如Git)和调试技巧。 在这个"前端小白入门系列课程完整版"中,你将逐步学习到...

Global site tag (gtag.js) - Google Analytics