Question

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

但是，我更喜欢旧内容和新内容之间的轻微淡入/淡出（交叉渐变？）过渡。 div也会稍微调整一下，如果这会产生增长/收缩效果，那就更酷了。我认为Scriptaculous必须有这样的内置，但如果他们这样做，我肯定找不到它。

顺便提一下，如果你有一个Basecamp帐户就有一个很好的例子：登录并点击“所有人”然后“添加新公司”以查看效果。

任何人都知道如何做到这一点？谢谢！布赖恩

Answer 1

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

注意中间的大块 - 原型中的一些东西比RJS更容易。

Answer 2

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

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

Answer 3

淡出第一个div。同时在第二个div中盲目。当第一个消失时，第二个将显示扩展第一个的剩余部分。

嗯，就像那样。

如果你想查看他们正在呼叫的内容，请加载Firebug并逐步执行代码。

Answer 4

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

你可以将replace_html与Rails RJS中的visual_effect结合起来吗？

4 个答案: