无需插件的 jQuery 链式动画

2024-03-21

在使用 jQuery 之前,我可以做一个带有延迟的链式动画,如下所示:

$("#element").delay(45).animate({ }, 45)
             .delay(45).animate({ }, 45)
             .delay(45).animate({ }, 45);

现在,自从更新到 v1.6.1 以来,它不再执行以前的操作,而是跳到最后一个动画。忽略前面的陈述。我知道我可以为每个动画执行一个 oncomplete 回调,但这会变得很混乱:

$("#element").delay(45).animate({ }, 45, function(){
    $("#element").delay(45).animate({ }, 45, function(){
        $("#element").delay(45).animate({ }, 45);
    })
}) 

有谁知道我如何以简单干净的方式完成此任务?


编辑:添加了一个Fiddle http://jsfiddle.net/nhAdY/给你玩

我不久前写了这段代码,也许它对你有用? (抱歉缩进混乱)

/**
 * Queue.js
 *
 * @author Arend van Waart
 *
 *  This will allow for events to be queued by timestamp
 *
 * @example
 *  queue({
 *  1000: function () {
 *       // element a na 10ms uitfaden, en daar 100ms over doen
 *       $('#menu').fadeOut(2000);
 *  },
 *  500: function () {
 *    // na 50 ms element b en c inzoemen
 *    $('#content').slideUp(2000);
 * }
 * });
 */

var queue = function(queue){
    var self = this;
    // queue
    this.queue = queue;
    // time passed is 0
    this.timePassed = 0;
    // time in ms to sleep between checks.
    this.sleep = 100;

    var time = new Date();
    this.lastTime = time.getTime();
    this.iterate = function(){
        var total = 0;
        var time = new Date();

        // how much time has passed since we slept?
        self.timePassed = self.timePassed + (time.getTime() - self.lastTime);
        self.lastTime = time.getTime();
        for (var t in self.queue){
            if (t <= self.timePassed){
                self.queue[t]();
                delete(self.queue[t]);
            }
            total++;
        }

        if (total == 0){
            return;
        }else{
            setTimeout(self.iterate, self.sleep);
        }
    }
    this.iterate();
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

无需插件的 jQuery 链式动画 的相关文章

  • jquery ajax加载后丢失CSS

    大家知道如何解决 load Ajax 请求后的 css 问题吗 例如 如果我想从网页加载 DIV 在我的 Ajax 请求之后 container load path to div div id 我丢失了与该 div 关联的所有 css 和脚
  • 什么是 TinyMCE jQuery 包?

    我被要求在项目中使用 TinyMCE 编辑器 在下载页面上 有一个主包 然后是一个 jQuery 包 This package contains special jQuery build of TinyMCE and a jQuery in
  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val
  • Javascript/jQuery 外部高度()

    Does idOfLememt outerHeight 对所有浏览器产生相同的结果 IE7 有什么不同吗 只要去http api jquery com outerHeight http api jquery com outerHeight
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • 将 jQuery 验证器规则添加到 ASP 中动态创建的元素

    我在 MVC3 项目的页面上有一些动态插入的表单字段 通常我们会在服务器端添加 jQuery 验证 但在这种情况下我们不能 UI 中的多个字段生成一个隐藏字段的值 这就是提交的内容 我们无法针对隐藏字段进行验证 因此我们必须为用户可以看到的
  • 连锁函数未知次数

    我正在通过未知数量的步骤对元素的顶部 左侧 css 值进行动画处理 我使用以下代码来存储动画每个步骤所需的 css 值 paths left 300 top 161 left 402 然后我可以通过以下方式运行动画 element anim
  • 如何在 Google 地图 InfoWindow 中使用 Jquery?

    我想在 Google 地图 InfoWindow 中显示 jQuery 效果 显示和隐藏 div 我该怎么做 尽管我个人还没有尝试过 但这 gt http code google com p jquery ui map http code
  • Jquery POST 获取建议列表

    我有下一个代码 它运行良好 问题是当用户写完单词时 脚本不断创建后调用并不断更改建议列表 我想做一些事情 如果用户继续写一个单词 脚本会停止所有的 post 调用 只执行最后一个 inputString keydown function l
  • 如何防止滚动事件多次触发?

    我尝试防止多次滚动事件 例如250 毫秒内仅发生一个事件 为此我在互联网上找到了下面的去抖动功能 但我无法正确使用它 怎么了 function debounce func wait immediate var timeout return
  • 如何使用 JQuery DataTables 根据每个单元格中值的子字符串对列进行排序

    假设我有一列包含格式为 P 的对象标识符 例如 P12 3767 我使用的是 1 9 1 版本的 JQuery数据表插件 http datatables net用于排序和分页 有没有办法可以忽略单元格值的前 4 个字符 P12 部分 以便我
  • 如何在按键时更新一组文本字段并避免在提交时重置表单?

    我正在尝试制作一个简单的转换器 例如 但在 JavaScript 中 您输入以吨为单位的数量 它会显示一堆根据输入计算出的不同数字 有点像这样 这是我尝试过的
  • 如何将 div (或任何元素)覆盖在表格行 (tr) 上?

    我想在恰好有多个列的表行 tr 标记 上覆盖一个 div 或任何可以使用的元素 我尝试了几种方法 似乎都不起作用 我在下面发布了我当前的代码 我确实得到了一个覆盖 但不是直接覆盖在该行上 我尝试将覆盖顶部设置为 div Bottom css
  • 使用 keyup 上的 Submit() 提交表单两次

    我有一个与此类似的 jQuery HTML 代码
  • 使用 jQuery 将光标位置处的文本插入到 CKEditor

    我正在尝试使用 jQuery 将一段文本添加到现有的 CKEditor 单击链接时需要完成此操作 我尝试了这个解决方案 它适用于常规文本区域 但不适用于 CKEditor jQuery fn extend insertAtCaret fun
  • 如何使用 jquery 从 URL 获取域名?

    我有 eq 的域名 1 http www abc com search 2 http go abc com work 我从上面的 URL 中仅获取域名 输出如 1 http www abc com 2 http go abc com 我能怎
  • jQuery - 提高处理 XML 时的选择器性能

    我正在处理一个 XML 文件 当使用 XPath 样式选择器选择节点时 该文件的性能非常慢 这是运行特别慢的部分代码 for i 0 i
  • 禁用整个站点的 IE8 加速器

    是的 我知道有类似的问题 https stackoverflow com questions 499565 is it possible to disable ie8 accelerators on my website在 SO 上 但它已
  • 为什么这个 jquery 代码不能在黑莓上运行?

    我正在使用 jquerymobile 开发phonegap 应用程序 但在黑莓 9780 中它没有向我显示警报 我的代码是 document addEventListener deviceready run false function r
  • javascript/jquery 禁用点击提交按钮,防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这

随机推荐