スクロールするたびに点滅します

Question

スクロールしたときに画像がフェードインしながら表示したいです。
しかし、一回のスクロールですと問題ないのですが、
2回目になると画像が表示された状態で再び実行されるため、点滅のような
現象が起こります。

どなたかご教授お願いします。

var fadeSpeed = 3000;
$(window).scroll(function(){
    $('.pagiNation')
        .css({
		opacity: '0.0'})
        .animate({
		"marginRight":"60px",
		opacity: '1'}, fadeSpeed);
});

Answer 1

クラスを付けて除外するとか。

$( '.pagiNation' ) /* pageNation では？ */
	.not( '.animated' )
	.css( { opacity: '0.0' } )
	.animate( { marginRight: '60px', opacity: '1'}, fadeSpeed )
	.addClass( 'animated' );

【jQuery .not()と:not()の色々な使い方 | Stronghold Archive】
https://zxcvbnmnbvcxz.com/jquery-notとnotの色々な使い方/

Comments

[lars_fox]

ご指摘ありがとうございます。
not()についての勉強になりましたし、興味深いものでした。

Answer 2

一度しか実行されたくないなら Jquery.one を利用するか Jquery.offで解除しようか

追記

$('.classSelector').css({ opacity: '0.0'}):
$(window).scroll(function(){
    $('.classSelector').animate({ opacity: '1.0'}, fadeSpeed);
});

で初期透過率を別にする方法でもいいぞ