Question

使用这个jquery，我可以在加载后淡入页面：

<script type="text/javascript">
$(function() {
    $('body').hide().fadeIn(1000);
});
</script>

现在我要做的就是让点击按钮后发生这种功能。例如，当用户进入页面时，会出现一个带有可点击按钮的窗口。单击按钮后，它会在jquery中淡入加载页面淡入淡出。我认为这将是某种形式，但问题是它需要在页面加载时隐藏正文，然后在单击按钮后淡入正文。

编辑：我有这样的东西，但它不能正确加载。

<script type="text/javascript">
$(function (){
    $('bodycontent').hide();
});

function loadp(){
    $(function(){
    $('body').hide();
    $('bodycontent').fadeIn(1000);
     });
}   
</script>

以及身体和身体内容

<body>
<button onclick="loadp()">Try it</button>
</body>
<bodycontent>
codehere
</bodycontent>

理论上，单击按钮后应该隐藏身体并淡化身体内容。但是身体是隐藏的，但身体内容没有被加载。

Answer 1

<强> DEMO

<button id="fadeContent">OK, fade!</button>

<div id="bodyContent">    
    <h1>Page</h1>
    <p>Content</p>      
</div>

#bodyContent{
  display:none;
  position:absolute;
  top:0;      left;0;
  width:100%; height:100%;
  background:#cf5;
}

$(function() {

  $('#fadeContent').click(function(){
    $(this).hide();
    $('#bodyContent').fadeIn(1000);
  });

});

Answer 2

这是我如何做到这一点的小提琴：http://jsfiddle.net/VTD9k/ 关键是你将内容放在正文中的div内：#main-wraper，和另一个div中的按钮

单击按钮后，使用jquery淡入页面

2 个答案: