（jquery）阻止div在页面加载期间显示 [英] (jquery) prevent div from showing during page load

问题描述

如果您转到www.rambocats.com，当页面加载时，您会看到这个底部中心的div显示一两秒，然后消失。 （Div用粉红色字母表示画廊II）。它应该只在您向下滚动到页面的大约2/3时出现。如何在初始加载期间阻止它显示？

If you goto www.rambocats.com, as the page loads you'll see this bottom-center div showing up for a second or two, then disappears. (Div says "Gallery II" in pink letters). It's supposed to only appear once you've scrolled down to about 2/3 of the page. How do I prevent it from showing during initial load?

这是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();
  }
});

推荐答案

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

What's happening is that it's set to be visible by default, so it shows before the javascript/jquery runs to hide it.

我倾向于做什么从一开始就不应该看到的项目是为它们添加一个CSS类，它设置为 display：none; 或 visibility：hidden; ，如下所示：

What I tend to do for items that should not be visible from the start is add a CSS class to them that is set to display: none; or visibility: hidden;, like so:

.hide {
    display: none;
}

然后在调用后使用jquery删除类。隐藏（）。元素：

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

这篇关于（jquery）阻止div在页面加载期间显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！