编程语言
首页 > 编程语言> > javascript-您可以在Rails RJS中将replace_html与visual_effect结合使用吗?

javascript-您可以在Rails RJS中将replace_html与visual_effect结合使用吗?

作者:互联网

我正在使用Ruby on Rails开发网站,并且我有一个包含一些内容的div.单击链接后,我希望该内容被其他内容替换.与replace_html和rjs一起使用时效果很好.

但是,我希望新旧内容之间要有轻微的淡入/出现(淡入淡出?)过渡.另外,div会被调整一些大小,因此如果这样做会产生长大/缩小的效果,它会更凉爽.我当时以为Scriptaculous必须内置这样的东西,但是我敢肯定找不到它们.

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

有人知道怎么做吗?谢谢!
布赖恩

解决方法:

要淡入淡出,您需要绝对放置新内容,并且具有与旧内容相同的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中容易.

标签:scriptaculous,ajax,javascript,ruby-on-rails
来源: https://codeday.me/bug/20191107/2004233.html