3

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

但是，我希望在新旧内容之间有轻微的淡入淡出/出现（交叉淡入淡出？）过渡。此外，div 将调整大小，因此如果这样做会产生增长/收缩效果会更酷。我在想 Scriptaculous 必须有这样的内置功能，但如果有的话我肯定找不到。

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

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

4

4 回答 4

4

要交叉淡入淡出，您需要绝对定位新内容，并使用与旧内容相同的 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 中更容易。

于 2009-03-21T19:26:11.727 回答
0

一种策略可能是将元素放入包装 div 中，淡出该包装 div，替换元素中的 HTML，然后再次淡入包装 div。

我自己不是 RJS/scriptaculous 用户，所以我不确定代码是什么，但我很确定该策略会奏效。

于 2009-03-19T08:04:05.883 回答
0

淡出第一个 div。同时在第二格中失明。随着第一个消失，第二个似乎扩大了第一个的剩余部分。

嗯，类似的东西。

如果您想查看它们在调用什么，请加载 Firebug 并逐步执行代码。

于 2009-03-20T03:48:27.230 回答
0

一种快速的方法是进行替换，然后使 div 脉动。

于 2009-03-22T16:27:02.740 回答