スクロールしなくても、ページを開いたら要素をフェードさせたい

Question

前提・実現したいこと

スクロールしなくても、ページを開いたら要素をフェードさせたい。

ページを開けた時とスクロールした時にフェードで要素が表示せれるようにしたいのですが、
ページの上部にすでに要素がある場合のみ、ページを開けても、フェードで反映される時もあれば、要素がフェードしないで空白になってしまったり、とても不安定です。ページを開けた時に、要素が上部にあってもすでにフェードで出てくるようにするには、どうしたら良いでしょうか？
どなたか詳しい方いらっしゃいましたら、教えてくださると助かります。
よろしくお願いいたします。

発生している問題

ページを開けても、フェードで反映される時もあれば、要素がフェードしないでページが空白になってしまう。

以下が試しているコードになります。

jQuery(function($) {

var effect_btm = 0;
var effect_move = 11;
var effect_time = 500;

$('.scroll-fade-row').css({
  opacity: 0

});
$('.scroll-fade-row').children().each(function(){
$(this).css({
opacity: 0,
transform: 'translateY('+ effect_move +'px)',
transition: effect_time + 'ms'
});
});

$(window).on('scroll load', function(){
var scroll_top = $(this).scrollTop();
var scroll_btm = scroll_top + $(this).height();
var effect_pos = scroll_btm - effect_btm;

  $('.scroll-fade-row').each( function() {
      var this_pos = $(this).offset().top;
      if ( effect_pos > this_pos ) {
          $(this).css({
              opacity: 1,
              transform: 'translateY(0)'
          });
          $(this).children().each(function(i){
              $(this).delay(100 + i*200).queue(function(){
                  $(this).css({
                      opacity: 1,
                      transform: 'translateY(0)'
                  }).dequeue();
                });
            });
        }
    });

});

});

Answer 1

jQueryはv3系ですか？そしたら以下が当てはまるかもしれません。
https://wemo.tech/109
readyとloadの解釈が厳格になったと言うことでしょうか。。。

コード的には一番大枠の部分を消したら一応は動いたみたいですけど、
どうでしょう

var effect_btm = 0;
var effect_move = 11;
var effect_time = 500;

$(".scroll-fade-row").css({
opacity: 0
});
$(".scroll-fade-row")
.children()
.each(function () {
$(this).css({
opacity: 0,
transform: "translateY(" + effect_move + "px)",
transition: effect_time + "ms"
});
});
$(window).on("scroll load", function () {
var scroll_top = $(this).scrollTop();
var scroll_btm = scroll_top + $(this).height();
var effect_pos = scroll_btm - effect_btm;

$(".scroll-fade-row").each(function () {
var this_pos = $(this).offset().top;
if (effect_pos > this_pos) {
$(this).css({
opacity: 1,
transform: "translateY(0)"
});
$(this)
.children()
.each(function (i) {
$(this)
.delay(100 + i * 200)
.queue(function () {
$(this)
.css({
opacity: 1,
transform: "translateY(0)"
})
.dequeue();
});
});
}
});
});

Comments

[sofie]

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