1

私はJquery Appearプラグインを機能させようとしていますが、少し下にスクロールしたときにのみ機能し、最初に初期化する必要があるかのように、スクロールしたアイテムに戻ります。

これはhttps://github.com/morr/jquery.appearを使用した表示プラグインです

ここに私が得たものを示す Jfiddle があります: http://jsfiddle.net/bWTbt/

基本的に、ウィンドウの入力時に各 P タグがフェードインする必要があります (ブラウザーの読み込み時に画面に表示される P は、フェードインではなく、スクロールによって新しいアイテムがウィンドウに表示されるときにのみフェードインする必要があります)。そのため、すべての P タグが表示されるまで、すべてのタグが表示されます (一番下までスクロールします)。その後、不透明度アニメーションが機能します。ただし、ページを下にスクロールすると、初めてアニメーション化する必要があります。

また、アニメーション化/フェードインするためにPが本当に必要です。アニメーション化/フェードアウトする本当の理由はありませんが、最初にスクロールダウンしたときにフェードインするほど重要ではありません(消える機能を取り出してみましたしかし、それを行うとすべてが機能しなくなります)。ありがとう!!

JFiddle の JS の下部のようなコード:

$('.ribbit p').appear(); 
$('.ribbit p').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
  $(this).stop().animate({opacity: 1}, 1000);
});
$('.ribbit p').on('disappear', function(event, $all_disappeared_elements) {
  // this element is now outside browser viewport
  $(this).stop().animate({opacity: 0}, 1000);
});
4

1 に答える 1

0

最初にスクロールせずに見えるCSSの不透明度を0に設定することで、機能するようになったようです。これは、viewport jquery プラグインが提供するスクロールせずに見えるセレクターを使用して行いました! わーい

于 2013-07-25T10:34:40.650 に答える