jQuery隐藏当前div内容，然后加载新内容，然后显示新内容

Question

是否可以隐藏当前的 div 内容，然后加载新内容，然后在 jquery 点击时显示新内容？

这是页面：

<div id="menu">
<ol>
<li><a id="anchor1" href="#content_jump_point">Blah Blah Blah</a></li>
</ol>
</div>

<div id="content">
</div> 

css 是标准的，与问题无关，但还是有一些：

#menu{
float:left;
clear:both;
margin-left: auto;
margin-right:auto;
width: 100%
height:auto;
}

#content{
float:left;
clear:both;
margin-left: auto;
margin-right:auto;
width: 100%
height:auto;
}

页面第一次加载时加载到div的html

first_stuff.html

<h1> Stuff that gets loaded when the page loads</h1>
<p> lorem*20 </p>

anchor1被点击后加载的html： second_stuff.html

<h1> Stuff that slides in after the stuff above slides out</h1>
<p> lorem*10 </p>

这里是javascript：

<script type="text/javascript" src="../javascripts/jquery-1.12.0.min.js">
</script>
<script type="text/javascript" src="../javascripts/jquery-ui.min.js">
</script>

init 函数也加载了 src 但这里是：

<script type="text/javascript">

$(init);

function init(){

$('#content').load('/content/first_stuff.html');    

$("#anchor1").click(function(){

$('#content').hide("slide",{direction:"right"},1000);

$('#content').load('/content/second_stuff.html').show("slide",
{direction:"left"},1000);

});//end click function

};//end init

</script>

问题是在点击函数中，html 在内容被隐藏之前被加载到内容 div 中。因此，不是“first_stuff.html”向右滑出，“second_stuff.html”从左侧滑入，而是“second_stuff.html”立即加载，然后向右滑出并从左侧再次滑入。

我们希望“first_stuff.html”向右滑出，然后“second_stuff.html”从左侧滑入，在单击锚点的同时。

我们尝试了很多方法并彻底搜索了网络。非常感谢任何 wizzdom。

例如，我们尝试将 '.show()' 放在 '.load()' 方法的回调函数中，或者在调用 click 函数之前将 HTML 从内容 div 加载到变量中，然后隐藏它变量并将内容加载到内容 div。

Answer 1

这可行：
$('#content').hide("slide",{direction:"right"},1000,function(){$('#content').loa‌​‌​d ('second_stuff.html')});
$('#content').show("slide",{direction:"left"},1000);

Answer 2

你可以这样使用：

$('#content').show("slide",{direction:"left"},1000,function(){$('#content').load('second_stuff.html')});

先隐藏 div，然后在其中加载内容后显示 div。