草庐IT

javascript - jQuery 动画、链接、.each() 和 .animate()(或 fadeIn() 和 fadeOut())

coder 2023-08-10 原文

我今天在尝试解决这个问题时遇到了一些麻烦，我想在我的 DOM 中制作 5 个项目(列在同一属性元素 $('.elements') 下)淡入和淡出，在阅读了一些 API 之后，我认为 .each() 是实现淡入淡出展示画廊的绝妙主意。

但是，我目前正在使用:

$('.elements').each(function() {
    $(this).fadeIn(2000).delay(200).fadeOut(2000).show();
})

但所有内容都会同时淡入淡出。

我如何做一个顺序效果，其中所有东西都链接在一起，它从列表中的第一项开始(又名 - $('elements').eq(0)？)到最后一个，然后重新启动又是？

我真的需要一个 while 循环来在 javascript/jquery 中执行此操作吗？我希望有一个类似的函数，我可以链接它让 jQuery 执行以减少负载和文件大小。

另外，有没有办法限制图片从我的 div 溢出？

最佳答案 

(function loop() {
  $('.elements').each(function() {
    var $self = $(this);
    $self.parent().queue(function (n) {
      $self.fadeIn(2000).delay(200).fadeOut(2000, n);
    });
  }).parent().promise().done(loop);
}());

演示:http://jsfiddle.net/uWGVN/2/

已更新使其无限循环。

第二次更新:一种不同的、可能更具可读性的方法:

(function fade(idx) {
  var $elements = $('.elements');
  $elements.eq(idx).fadeIn(2000).delay(200).fadeOut(2000, function () {
    fade(idx + 1 < $elements.length ? idx + 1 : 0);
  });
}(0));

演示:http://jsfiddle.net/uWGVN/3/

关于javascript - jQuery 动画、链接、.each() 和 .animate()(或 fadeIn() 和 fadeOut())，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10032453/

javascriptanimateelementssectionfunctionjqueryhtml

有关javascript - jQuery 动画、链接、.each() 和 .animate()(或 fadeIn() 和 fadeOut())的更多相关文章

  1. ruby - 为什么 Ruby 的 each 迭代器先执行？ - 2

    我在用Ruby执行简单任务时遇到了一件奇怪的事情。我只想用每个方法迭代字母表，但迭代在执行中先进行:alfawit=("a".."z")puts"That'sanalphabet:\n\n#{alfawit.each{|litera|putslitera}}"这段代码的结果是:(缩写)abc⋮xyzThat'sanalphabet:a..z知道为什么它会这样工作或者我做错了什么吗？提前致谢。 最佳答案 因为您的each调用被插入到在固定字符串之前执行的字符串文字中。此外，each返回一个Enumerable，实际上您甚至打印它。试试

  2. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  3. 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来发送

  4. ruby - ruby 中有 each_if 吗？ - 2

    假设我在Ruby中有这个each循环。@list.each{|i|putsiifi>10breakend}我想循环遍历列表直到满足条件。这让我感到“不像Ruby”，因为我是Ruby的新手，是否有Ruby方法可以做到这一点？ 最佳答案 您可以使用Enumerable#detect或Enumerable#take_while，取决于您想要的结果。@list.detect{|i|putsii>10}#Returnsthefirstelementgreaterthan10,ornil.正如其他人所指出的，更好的风格是先进行子选择，然后再对其

  5. ruby - @things.each 或 5 次做 |t| - 2

    有没有一种方法可以让迭代器在对象为nil时仍然进行迭代？例如，我想从我的应用程序中剥离我的View并为设计师创建一个虚拟应用程序。所以我希望它迭代或循环。如何做到这一点？我刚刚找到了一种方法 最佳答案 你应该能够使用这样的东西:(@things||dummy_things).eachdo|thing|#dosomethingwiththingenddefdummy_thingsdummies=[]5.timesdodummies.push(Thing.new)enddummiesend因此，如果@things为nil，那么它的作用是

  6. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  7. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  8. jquery - 如何将 AJAX 变量从 jQuery 传递到他们的 Controller ？ - 2

    我有一个电子邮件表格。但是我正在制作一个测试电子邮件表单，用户可以在其中添加一个唯一的电子邮件，并让电子邮件测试将其发送到该特定电子邮件。为了简单起见，我决定让测试电子邮件通过ajax执行，并将整个内容粘贴到另一个电子邮件表单中。我不知道如何将变量从我的HAML发送到我的Controllernew.html.haml-form_tagadmin_email_blast_pathdoSubject%br=text_field_tag'subject',:class=>"mass_email_subject"%brBody%br=text_area_tag'message','',:nam

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby-on-rails - Ruby .each 效率 - 2

    我这样做(在我看来):#myUserisaUserinActiveRecordwith:has_many:postsmyUser.posts.eachdo|post|end如果用户有10个帖子，这会调用10次数据库吗？这些循环应该像(不那么漂亮)吗？:myPosts=myUser.postsmyPosts.eachdo|post|endHere是我测试的ruby​​文件的粘贴箱。编辑修改了粘贴箱。这让我想起了Java中的代码for(inti=0;i应该是(除非数组被修改)for(inti=0,len=someExpensiveFunction();i我错过了什么吗？我看到一堆Rails

随机推荐