jquery.inview.jsで表示領域に入る前にアニメーションは終わってしまう

Question

「jQuery.inview.js」と「animated.css」を読み込み、

$(function() {
$('.fade_in').on('inview', function(event, isInView) {
if (isInView) {
//表示領域に入った時
$(this).addClass('fadeIn');
} else {
//表示領域から出た時
$(this).removeClass('fadeIn');
$(this).css('opacity',0); //非表示にしておく
}
});
});

とスクリプトを指定しています。

アニメーションの要素部分を予めスクロールして表示領域を表示した状態でブラウザーの読み込みボタンをクリックするとアニメーション自体は正常に動くのですが、

アニメーションの要素部分を表示領域外にし、アニメーションの動作時間の過ぎたころスクロールするとアニメーション自体の動きが済んでしまっている状況です。

スクロールに追従して表示領域に入ったタイミングでアニメーションを起動できなく困っています。どなたかご教授をお願いいたします。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。また、具体的にどのように解決したかもコメントされたほうが良いと思います。

[x_x]

再現しません。
https://jsfiddle.net/7szymwtq/

Answer 1

$(this).css('opacity',0); //非表示にしておく

非表示にするコードはありますが、表示するコードがありません。

実際に試してみたわけではありませんが、アニメーションが起動していないのではなく、opacity が 0 の状態のままアニメーションが起動しているだけではないでしょうか。

Comments

[2KOH]

あと、質問内のコード部分は Markdown のコードブロックを使って記述してください。

[kuuuuniiii]

ご回答ありがとうございます。
$(this).css('opacity',0);は表示領域から出た時の部分に入っており、アニメーション自体は起動しております。最初にページがロードされた時点で対象領域をスクロールで表示させるとアニメーションは終了しており、スクロールで表示領域外に出し、再度対象領域までスクロールするとスクロールに追従してアニメーションは起動します。
ですので、最初にページがロードされたときだけ対象領域外でもアニメーションが起動し終わってしまっている状況です。

[2KOH]

手元で試してみましたが、スクロールして要素が表示されたら fadeIn が class に追加され、要素が表示されなくなったら fadeIn が class から削除されることを確認しました。
正常に動作しない状態を再現できるコードを提示してください。

[kuuuuniiii]

解決しました！
ありがとうございました。