2


0

リアルタイムjqueryエフェクトを作成する方法は?

リアルタイムフィードリーダーを作成し、ページを更新せずに、FriendFeedのようなスクロール効果を使用して新しいアイテムを作成するソリューションが必要です。

あなたは私がここで話していることを見ることができます:http://www.vimeo.com/4029954

私は新しいDIVコンテンツで呼び出すことができる関数が欲しいだけで、それがエフェクトを持つ以前のDIVの上にそれを作成します。

注:私はすでにajaxとsettimeout関数を持っています。つまり、追加する新しいフィードコンテンツがあるので、探しているのはスクロール効果で新しいdivを追加する効果と関数です。

ありがとう

4 Answer


2


`slideDown()`エフェクトよりも優れたものを探しているかもしれません。 オブジェクトを「スクロール」して見えるようにするのではなく、オブジェクトの高さを増加させるだけなので、これはまったく正しくありません。 jQuery UIから `show()`エフェクトをチェックしてください。 http://jqueryui.com/demos/show/#option-effect上下にスライドするオプションを与えた場合、「スライド」効果が適切だと思います。 「ドロップ」効果は正しいように聞こえますが、試してみると「スライド」と同じ効果が得られます。 おそらくそれは現時点でのデモサイトのバグでしょう。

また、 animate()`メソッドを使用して要素の `top`プロパティをアニメーション化して、ビューに「スクロール」できるようにすることもできます。 「overflow:hidden」が設定されたコンテナと、「position:relative」が設定された「height」と「width」が設定されている必要があります。 それから、 `position:absolute`を持つ内部コンテナは、 jQuery.animate() top`プロパティをアニメーション化できます。

var $items = $("#scroller .inner *");
$('#scroller .inner').animate({
    top: '-' + Math.round( $items.length * $items.eq(0).outerHeight(true) ) + 'px'
  });

各内部要素の高さを知っている場合、 `$ items.eq(0).outerHeight(true)`を既知の高さの整数値に置き換えることができます。


1


新しいDIVコンテンツで呼び出す関数が必要な場合は、すでにAJAXリクエストを実行したと仮定します。

次に、サイトにコンテンツを追加するには:すべてのエントリのコンテナに一致する場合は、http://docs.jquery.com/Manipulation/prepend#contentが必要です。最初のエントリに一致する場合は、 http://docs.jquery.com/Manipulation/before#contentを使用します。

素敵なスライドダウン効果が必要な場合は…​ それを待つ …​ はい、スライドダウン機能:) http://docs.jquery.com/Effects/slideDown


0


さらに役立つテクニックをいくつか紹介しますが、この後は自分で調査する必要があります。


0


JavaScript setTimeout functionを使用して、定期的に関数を呼び出します。 この関数は、http://docs.jquery.com/Ajax [jQueryのAJAX関数]のいずれか、たとえばhttp://docs.jquery.com/Ajax/load#urldatacallback[$.load]を呼び出す必要があります。