javascript (jquery) 防止 div 在页面加载期间显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12397199/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
(jquery) prevent div from showing during page load
提问by Stephen
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?
如果您转到 www.rambocats.com，当页面加载时，您会看到底部居中的 div 显示一两秒钟，然后消失。（Div 用粉红色字母表示“画廊 II”）。它应该只在您向下滚动到页面的 2/3 左右时才会出现。如何防止它在初始加载期间显示？
Here's the jQuery:
这是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();
}
});
回答by jmoerdyk
What's happening is that it's set to be visible by default, so it shows before the javascript/jquery runs to hide it.
发生的事情是默认情况下它设置为可见，因此它在 javascript/jquery 运行以隐藏它之前显示。
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:
对于从一开始就不应该可见的项目，我倾向于为它们添加一个 CSS 类，该类设置为display: none;or visibility: hidden;，如下所示：
.hide {
display: none;
}
then using jquery to remove the class after calling .hide(). on the element:
然后在调用后使用 jquery 删除类.hide()。在元素上：
$('#elementId').hide().removeClass('hide');
回答by MikeL
It can be as simple as:
它可以很简单：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Let's hide and show a div</title>
<style type="text/css">
#myHiddenDiv { visibility: hidden; }
</style>
</head>
<body>
<div id="myHiddenDiv">
Hidden until after the script loads. It will be imperceptible in most cases. But if you comment out or remove the script, the div will indeed be hidden!
</div>
<script type="text/javascript">
document.getElementById('myHiddenDiv').style.visibility = 'visible';
</script>
</body>
</html>
回答by Danail Gabenski
I think it's animating the .hide()event, try style="display:none;"as part of the html for the $("#homiesSlideButton")element.
我认为它正在为.hide()事件设置动画，尝试style="display:none;"作为$("#homiesSlideButton")元素的 html 的一部分。
回答by Aesthete
In the CSS for your div, set the div to have the property
在 div 的 CSS 中，将 div 设置为具有属性
visibility: hidden;
When the page has loaded,
页面加载完毕后，
$("#yourDivId").show();
