你可以结合replace_html在Rails的RJS一个visual_effect的？ [英] Can you combine replace_html with a visual_effect in Rails RJS?

问题描述

我发展与Ruby on Rails的一个网站，我有一些内容股利。点击一个链接后，我想该内容被替换为一些其他的东西。这能与replace_html和RJS。

I'm developing a website with Ruby on Rails and I have a div with some content. After clicking a link I want that content to get replaced with some other stuff. This works fine with replace_html and rjs.

不过，我想preFER那里是旧的和新的内容之间的轻微掉色/显示（交叉淡入淡出？）过渡。此外在div将被重新调整了一点，所以它会是凉爽如果这样一个放大/缩小的效果。我想Scriptaculous的，必须有这样的事情内置的，但我肯定找不到如果他们这样做。

However, I'd prefer there to be a slight fade/appear (crossfade?) transition between the old and new content. Also the div will be resized a bit so it'd be cooler if this did a grow/shrink effect. I was thinking Scriptaculous must have something like this built in, but I sure can't find it if they do.

顺便说有这个，如果你有一个大本营帐户一个很好的例子：登录并点击所有的人，然后添加一个新的公司，看在行动的效果

By the way there is a great example of this if you have a Basecamp account: login and click "All people" then "Add a new company" to see the effect in action.

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

Anyone know how to do this? Thanks! Brian

推荐答案

要交叉淡入淡出，你需要绝对定位您的新内容，并用相同的x / y坐标为旧的内容。这里有一个测试，例如：

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

请注意中间和mdash大块;有些事情是容易的原型比RJS

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

这篇关于你可以结合replace_html在Rails的RJS一个visual_effect的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！