jjzjj

javascript - jQuery 动画延迟问题与步骤的自排队循环

coder 2024-07-16 原文

我有一个 timeline 定义，其中列出了选择器以及应用于该对象的延迟和动画列表。您可以指定循环特定对象的步骤。

下面是用于对动画进行排队的函数:

function animateWithQueue(e, obj) {
    if ($.queue(e[0]).length == 0) {
        e.queue(function doNext(next) {
            $.each(obj.steps, function(i, step) {
                e.delay(step.pause).animate(step.anim, step.options);
            });
            if (obj.loop) {
                e.queue(doNext);
            }
            next();
        });
    }
}​

这里是时间线信息

var timeline = {
    '.square': {
        loop: true,
        steps: [
            { pause: 800, anim: { right: '+=200' }, options: { duration: 400} },
            { pause: 1000, anim: { right: '-=200' }, options: { duration: 400} }
        ]
    },
    '.circle': {
        loop: true,
        steps: [
            { pause: 1200, anim: { top: '+=200' }, options: { duration: 400} },
            { pause: 1200, anim: { top: '-=200' }, options: { duration: 400} }
        ]
    }
};

下面是将时间轴放入上述动画函数的函数:

$.each(timeline, function(selector, obj) {
    animateWithQueue($(selector), obj);
});

这是一个完整的例子。 http://jsfiddle.net/sprintstar/Tdads/

此代码似乎工作正常，可以单击动画循环和停止按钮来停止动画、清除队列等。但是，我们面临的问题可以通过点击停止并一遍又一遍地开始来触发(比如10倍)。然后注意延迟不再正常工作，并且形状移动得更快。

这是为什么，如何解决？

最佳答案

使用delay 时有些事情不太正常...

作为解决方法，我将其替换为 doTimeout在 this fiddle ，所以如下:

  e.delay(step.pause).animate(step.anim, step.options);

变成:

    var timerName = e[0].className + $.now();
    timeouts.push(timerName);
    e.queue(function(next) {
      e.doTimeout(timerName, step.pause, function() {
          this.animate(step.anim, step.options);
          next();
        });
    });

timeouts 是一组唯一的超时 ID - 当按下停止按钮时，每个超时 ID 都会被清除。

正如我所说，与其说是修复，不如说是解决方法，因为您还需要在停止时重置元素的位置。 (注意我已经从顶部/右侧定义中删除了 += 和 -=)

关于javascript - jQuery 动画延迟问题与步骤的自排队循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12300378/

javascriptjQuerycodesectionstepjquery-animate

有关javascript - jQuery 动画延迟问题与步骤的自排队循环的更多相关文章

  1. ruby - 树顶语法无限循环 - 2

    我脑子里浮现出一些关于一种新编程语言的想法，所以我想我会尝试实现它。一位friend建议我尝试使用Treetop(Rubygem)来创建一个解析器。Treetop的文档很少，我以前从未做过这种事情。我的解析器表现得好像有一个无限循环，但没有堆栈跟踪；事实证明很难追踪到。有人可以指出入门级解析/AST指南的方向吗？我真的需要一些列出规则、常见用法等的东西来使用像Treetop这样的工具。我的语法分析器在GitHub上，以防有人希望帮助我改进它。class{initialize=lambda(name){receiver.name=name}greet=lambda{IO.puts("He

  2. ruby-on-rails - 在 Ruby 中循环遍历多个数组 - 2

    我有多个ActiveRecord子类Item的实例数组，我需要根据最早的事件循环打印。在这种情况下，我需要打印付款和维护日期，如下所示:ItemAmaintenancerequiredin5daysItemBpaymentrequiredin6daysItemApaymentrequiredin7daysItemBmaintenancerequiredin8days我目前有两个查询，用于查找maintenance和payment项目(非排他性查询)，并输出如下内容:paymentrequiredin...maintenancerequiredin...有什么方法可以改善上述(丑陋的)代

  3. ruby - 在 64 位 Snow Leopard 上使用 rvm、postgres 9.0、ruby 1.9.2-p136 安装 pg gem 时出现问题 - 2

    我想为Heroku构建一个Rails3应用程序。他们使用Postgres作为他们的数据库，所以我通过MacPorts安装了postgres9.0。现在我需要一个postgresgem并且共识是出于性能原因你想要pggem。但是我对我得到的错误感到非常困惑当我尝试在rvm下通过geminstall安装pg时。我已经非常明确地指定了所有postgres目录的位置可以找到但仍然无法完成安装:$envARCHFLAGS='-archx86_64'geminstallpg--\--with-pg-config=/opt/local/var/db/postgresql90/defaultdb/po

  4. ruby - 通过 rvm 升级 ruby​​gems 的问题 - 2

    尝试通过RVM将RubyGems升级到版本1.8.10并出现此错误:$rvmrubygemslatestRemovingoldRubygemsfiles...Installingrubygems-1.8.10forruby-1.9.2-p180...ERROR:Errorrunning'GEM_PATH="/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/ruby-1.9.2-p180@global:/Users/foo/.rvm/gems/ruby-1.9.2-p180:/Users/foo/.rvm/gems/rub

  5. ruby - 通过 RVM (OSX Mountain Lion) 安装 Ruby 2.0.0-p247 时遇到问题 - 2

    我的最终目标是安装当前版本的RubyonRails。我在OSXMountainLion上运行。到目前为止，这是我的过程:已安装的RVM$\curl-Lhttps://get.rvm.io|bash-sstable检查已知(我假设已批准)安装$rvmlistknown我看到当前的稳定版本可用[ruby-]2.0.0[-p247]输入命令安装$rvminstall2.0.0-p247注意:我也试过这些安装命令$rvminstallruby-2.0.0-p247$rvminstallruby=2.0.0-p247我很快就无处可去了。结果:$rvminstall2.0.0-p247Search

  6. ruby - Fast-stemmer 安装问题 - 2

    由于fast-stemmer的问题，我很难安装我想要的任何ruby​​gem。我把我得到的错误放在下面。Buildingnativeextensions.Thiscouldtakeawhile...ERROR:Errorinstallingfast-stemmer:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcreatingMakefilemake"DESTDIR="cleanmake"DESTDIR=

  7. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  8. ruby - 安装 Ruby 时遇到问题(无法下载资源 "readline--patch") - 2

    当我尝试安装Ruby时遇到此错误。我试过查看this和this但无济于事➜~brewinstallrubyWarning:YouareusingOSX10.12.Wedonotprovidesupportforthispre-releaseversion.Youmayencounterbuildfailuresorotherbreakages.Pleasecreatepull-requestsinsteadoffilingissues.==>Installingdependenciesforruby:readline,libyaml,makedepend==>Installingrub

  9. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  10. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

随机推荐