3

Ruby on Rails で Web サイトを開発しており、いくつかのコンテンツを含む 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

真ん中の大きなブロックに注目してください。RJS よりも Prototype の方が簡単なことがあります。

于 2009-03-21T19:26:11.727 に答える
0

最初の div をフェードアウトします。同時に2nd divでブラインド。1つ目が消えると、2つ目が1つ目の残りを拡大して表示されます。

まあ、そのようなもの。

彼らが何を呼び出しているかを確認したい場合は、Firebug をロードしてコードをステップスルーしてください。

于 2009-03-20T03:48:27.230 に答える
0

簡単な方法の 1 つは、置換を行ってから div を脈動させることです。

于 2009-03-22T16:27:02.740 に答える
0

要素をラッピング div に配置し、そのラッピング div をフェードアウトし、要素内の HTML を置き換えてから、ラッピング div を再びフェードインするという戦略が考えられます。

私自身は RJS/scriptaculous のユーザーではないので、コードが何であるかはわかりませんが、その戦略がうまくいくと確信しています。

于 2009-03-19T08:04:05.883 に答える