(jquery)阻止div在页面加载期间显示
如果您转到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');