你能在Rails RJS中将replace_html与视觉效果结合起来吗？

发布于 2024-07-15 02:48:28 字数 346 浏览 5 评论 0原文

我正在使用 Ruby on Rails 开发一个网站，并且有一个包含一些内容的 div。单击链接后，我希望该内容被其他内容替换。这对于replace_html 和rjs 来说效果很好。

但是，我希望新旧内容之间有轻微的淡入淡出/出现（交叉淡入淡出？）过渡。此外，div 的大小也会稍微调整，因此如果具有增长/收缩效果，效果会更酷。我想 Scriptaculous 一定内置了类似的东西，但如果他们这样做的话我肯定找不到它。

顺便说一句，如果您有 Basecamp 帐户，有一个很好的例子：登录并单击“所有人”，然后单击“添加新公司”以查看实际效果。

有人知道怎么做吗？谢谢！布莱恩

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

如梦 2024-07-22 02:48:28

要交叉淡入淡出，您需要绝对定位新内容，并使用与旧内容相同的 x/y 坐标。这是一个经过测试的示例：

page.insert_html :after, 'old-content', content_tag('p', '[new content]', :id => 'new-content', :style => 'display:none')
page << <<-JS
  var oldOffset = $('old-content').cumulativeOffset();
  $('new-content').setStyle({
    position: 'absolute',
    left:     oldOffset.left + 'px',
    top:      oldOffset.top + 'px'
  });
JS
page['old-content'].fade :duration => 3
page['new-content'].appear :duration => 3

请注意中间的大块 — 有些事情在 Prototype 中比在 RJS 中更容易。

To crossfade, you need to position your new content absolutely, and with the same x/y coordinates as the old content. Here's a tested example:

page.insert_html :after, 'old-content', content_tag('p', '[new content]', :id => 'new-content', :style => 'display:none')
page << <<-JS
  var oldOffset = $('old-content').cumulativeOffset();
  $('new-content').setStyle({
    position: 'absolute',
    left:     oldOffset.left + 'px',
    top:      oldOffset.top + 'px'
  });
JS
page['old-content'].fade :duration => 3
page['new-content'].appear :duration => 3

Note the big block in the middle—some things are easier in Prototype than in RJS.

回复收藏 0 原文