【问题标题】:jQuery logic : Travesing elements and fading them in?jQuery 逻辑:遍历元素并将它们淡入?
【发布时间】:2011-10-23 11:30:39
【问题描述】:

征集 jQuery 专家 :)

http://s3.postimage.org/nb2mm7u2/download.png

这就是我需要的。我需要每个块一个一个地淡入。淡入顺序应该是:

  • 第一个蓝色元素
  • 第二个蓝色元素
    • Top-1 和 Bottom-1 绿色元素(一起)
    • Top-2 & Bottom-2 绿色元素(一起)
    • Top-3 和 Bottom-3 绿色元素(一起)
  • 第三个蓝色元素
  • 第四个蓝色元素
    • Top-1 和 Bottom-1 绿色元素(一起)
    • Top-2 & Bottom-2 绿色元素(一起)
  • 第五个蓝色元素

PS:最初一切都将被隐藏,然后一切都按顺序出现以形成最终的形状。

在这里解决:JSBIN 上的 HTML/CSS 代码:http://jsbin.com/ogehoj/edit#javascript,html,live

【问题讨论】:

  • 你尝试过实现它吗?
  • 你有没有尝试过?您可以尝试使用 :nth-child() (api.jquery.com/category/selectors/child-filter-selectors) 和逗号选择元素以选择多个元素并调用 fadeIn 给它回调在淡入完成时执行的操作(淡入下一个元素)。
  • 尝试了使用类名的相同方法,但确实在寻找一个无类名的解决方案。

标签: jquery arrays logic traversal


【解决方案1】:

很高兴看到您在此处发布之前尝试过的一些证据。看看http://jsbin.com/etised/4/edit

简而言之;

  • 通过将data-render-seq="x" 添加到适当的元素来定义渲染顺序
  • 加载时,按.data('render-seq') 对元素进行分组
  • 按顺序迭代,调用.fadeToggle() 并增加延迟(如果需要)

我假设您能够修改 html,并且您不介意使用另一个 js 库 (underscore.js)

【讨论】:

  • 嗨 Rob - 非常感谢 :) 我已经尝试过使用“类名”而不是您使用的“数据值”。但是,您的代码很有条理。以前从未使用过 underscore.js。谢谢!
猜你喜欢
  • 1970-01-01
  • 2018-07-20
  • 1970-01-01
  • 2017-01-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多