javascript - (jquery) 防止 div 在页面加载期间显示

Question

如果您转到 www.rambocats.com，当页面加载时，您会看到这个底部居中的 div 显示一两秒钟，然后消失。 (Div 用粉色字母写着“Gallery II”)。它应该只在您向下滚动到页面的大约 2/3 时才会出现。如何防止它在初始加载期间显示？

这是 jQuery:

$(document).ready(function(){
var open = false;
$('#homiesSlideButton').click(function() {
    if(open === false) {
        $('#homiesSlideContent').animate({ height:'610px' });
        $(this).css('backgroundPosition', 'bottom left');
               $("#homies-wrapper img").peTransitionHilight({   // image highlight/transitions plugin
                                        slideshow:true, 
                                        transition:"all", 
                                        duration:1500, 
                                        delay:4444, boost:0.3
                                  });
        open = true;
    } else {
        $('#homiesSlideContent').animate({ height: '0px' });
        $(this).css('backgroundPosition', 'top left');
        open = false;
    }
});
});

$("#homiesSlideButton").hide();
$(window).scroll(function(){
if($(window).scrollTop()>4444){               // position on page when button appears
     $("#homiesSlideButton").fadeIn();
  }else{
     $("#homiesSlideButton").fadeOut();
  }
});  


$(window).scroll(function(){
if($(window).scrollTop()>4444){               // position on page when button disappears
     $("#homiesSlideContent").fadeIn();
  }else{
     $("#homiesSlideContent").fadeOut();
  }
});

Answer 1

发生的事情是它默认设置为可见，因此它会在 javascript/jquery 运行以隐藏它之前显示。

对于从一开始就不应该可见的项目，我倾向于为它们添加一个 CSS 类，将其设置为 display: none; 或 visibility: hidden;，像这样:

.hide {
    display: none;
}

然后在调用 .hide() 后使用 jquery 删除该类。在元素上:

$('#elementId').hide().removeClass('hide');