Javascript （jquery）防止在页面加载期间显示div_Javascript_Jquery_Fouc

Javascript （jquery）防止在页面加载期间显示div

javascript jquery

Javascript （jquery）防止在页面加载期间显示div,javascript,jquery,fouc,Javascript,Jquery,Fouc,如果你转到www.rambocats.com，当页面加载时，你会看到底部中间的div出现一两秒钟，然后消失。Div用粉色字母写着Gallery II。它应该只在你向下滚动到页面的2/3时出现。如何防止它在初始加载期间显示以下是jQuery： $(document).ready(function(){ var open = false; $('#homiesSlideButton').click(function() { if(open === false) { $('#

如果你转到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();
  }
});

我认为它正在制作.hide事件的动画，请尝试style=display:none；作为$HOMISSLIDEBUTTON元素html的一部分。

我认为它正在设置.hide事件的动画，请尝试style=display:none；作为$HOMISSLIDEBUTTON元素html的一部分。

在div的CSS中，将div设置为具有属性

visibility: hidden;

加载页面后

$("#yourDivId").show();

在div的CSS中，将div设置为具有属性

visibility: hidden;

加载页面后

$("#yourDivId").show();

现在的情况是，默认情况下，它被设置为可见，因此它会在javascript/jquery运行之前显示以隐藏它

对于从一开始就不应该可见的项目，我倾向于向其添加一个CSS类，该类设置为display:none；或可见性：隐藏；，像这样：

.hide {
    display: none;
}

然后在调用.hide后使用jquery删除该类。关于要素：

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

现在的情况是，默认情况下，它被设置为可见，因此它会在javascript/jquery运行之前显示以隐藏它

对于从一开始就不应该可见的项目，我倾向于向其添加一个CSS类，该类设置为display:none；或可见性：隐藏；，像这样：

.hide {
    display: none;
}

然后在调用.hide后使用jquery删除该类。关于要素：

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

它可以简单到：

<!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>

它可以简单到：

<!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>

谢谢你，解释得很精彩！谢谢你，解释得很精彩！