あなたは、RailsのRJSでvisual_effectでreplace_html組み合わせることができますか？

StackOverflow https://stackoverflow.com/questions/660765

質問

私はRuby on Railsを持つウェブサイトを開発していると私はいくつかのコンテンツを持つdiv要素を持っています。リンクをクリックした後、私は、そのコンテンツは、いくつかの他のものに置き換えを取得したいです。これはreplace_htmlとRJSで正常に動作します。

しかし、私は古いものと新しいコンテンツ間のわずかなフェード/表示されます（クロスフェード？）の移行があるように好みます。これは縮小/成長効果をした場合、それは涼しいだろうので、またdivが少し変更されます。私はScriptaculousのは内蔵のこのような何かを持っている必要がありますが、彼らがしなければ、私は確かにそれを見つけることができません考えていた。

あなたはベースキャンプアカウントをお持ちの場合

ちなみにこれの良い例があります：「すべての人は、」その後、アクションで効果を確認するために、「新会社を追加」をクリックしてログインし、

。

誰もがこれを行う方法を知っていますか？ありがとう！ ブライアン

役に立ちましたか？

解決

クロスフェードするには、絶対にあなたの新しいコンテンツを配置する必要があり、同じ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よりもプロトタイプで簡単です。

他のヒント

戦略は、ラッピングのdiv内の要素を置くのdivをラップすることをフェードアウト、要素にHTMLを交換して、ラッピングをフェードインすることができ、再びDIVます。

私は自分自身をRJS / Scriptaculousのユーザーではないので、私はコードが何であるかわからないんだけど、私は戦略が動作することをかなり確信しています。

第一のdivをフェードアウト。 同時に第二のdivでブラインド。 第一1つのフェードとして、第二は、最初のものの残っているもの拡大して表示されます。

さて、そのような何かます。

Firebugのをアップロードし、あなたは彼らが呼んでいるものを見たい場合はコードをステップます。

一つの簡単な方法を交換し、その後のdivを脈動ないことであろう。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top