過去のトリガーポイントをスクロールするたびに機能がリセットされ続ける

Question

私は、特定のポイントまでスクロールする機能を持っていますが、機能は動作しますが、スクロールするたびにリセットしています。特定のポイントとその特定のポイントだけ？

$(document).ready(function(){ 

function someFunction() { 
$(".someContent .someYellowOverlay").toggleClass("someAnimation").delay(250).queue(function(next){ 
$(this).css("transform-origin", "right center"); 
next(); 
}).delay(125).queue(function(next){ 
$("p").css("display", "block"); 
next(); 
}).delay(250).queue(function(next){ 
$(this).removeClass("someAnimation"); 
next(); 
}) 
} 

$(document).scroll(function(){ 

var scrollPos = $(document).scrollTop(); 
console.log(scrollPos) 

if (scrollPos >= 250) { 
    someFunction(); 
    setTimeout(); 
} 

}) 
}) 

https://codepen.io/alexyap/pen/jmQqvQ?editors=0110

Answer 1

あなたはスクロールが250以上である第一の時間を設定しますフラグを使用して、スクロールは、ユーザがスクロールならダウン、バックアップ未満250（そのようである場合、それをリセットすることができ、そしてもう一度、それは再びトリガーになります）。

$(document).ready(function(){ 

var flag = false; 

function someFunction() { 
    $(".someContent .someYellowOverlay").toggleClass("someAnimation").delay(250).queue(function(next ) { 
    $(this).css("transform-origin", "right center"); 
    next(); 
    }).delay(125).queue(function(next) { 
    $("p").css("display", "block"); 
    next(); 
    }).delay(250).queue(function(next) { 
    $(this).removeClass("someAnimation"); 
    next(); 
    }); 
} 

$(document).scroll(function(){ 
    var scrollPos = $(document).scrollTop(); 
    console.log(scrollPos) 

    if (scrollPos >= 250 && flag === false) { 
    flag = true; 
    someFunction(); 
    setTimeout(); 
    } else if (scrollPos < 250) { 
    flag = false; 
    } 
}); 

}); 

あなたはイベントは1回のみ起こるしたい場合は、単に余分なelse if条件を削除するか、イベントが一度だけ起こることを確認しますjQueryのoneメソッドを使用しての中に見ることができます。

は

Answer 2

それはそれは常に発射されるため、リセット維持され、 私は私の場合には、グローバル変数、 を追加することをお勧め私はdoAnimateそれを呼んだ、 アニメーションが真のトリガーであるかない場合は、チェックしますそれはすでに起動したことを意味し、私が上にスクロールするたびにリセットされます。

$(document).ready(function(){ 
var doAnimate = true; 
function someFunction() { 
if(doAnimate){ 
$(".someContent.someYellowOverlay") 
.toggleClass("someAnimation").delay(250).queue(function(next){ 
    $(this).css("transform-origin", "right center"); 
    next(); 
    }).delay(125).queue(function(next){ 
    $("p").css("display", "block"); 
    next(); 
    }).delay(250).queue(function(next){ 
    $(this).removeClass("someAnimation"); 
    next(); 
    }) 
} 
doAnimate = false; 
} 

var flag = false; 
$(document).scroll(function(){ 

var scrollPos = $(document).scrollTop(); 
console.log(scrollPos) 

if (scrollPos >= 250 && flag === false) { 
flag = true; 
someFunction(); 
} 
// when it reach the top again reset all 
if(scrollPos == 0) 
    { 
flag = false; 
    $("p").css("display", "none"); 
    doAnimate = true; 
    } 
}) 
})