jquery隱藏當前div的內容，然後加載新內容，然後顯示新內容

可能隱藏當前的div內容，然後加載新的內容，然後顯示新的內容jQuery點擊？jquery隱藏當前div的內容，然後加載新內容，然後顯示新內容

這裏的頁面：

<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; 
}

的HTML加載到div時第一次加載頁面

first_stuff.html 

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

單擊anchor1後加載的html： seco nd_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>

初始化函數還裝載了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。例如，我們試圖在'.load（）'方法的回調函數中放置'.show（）'，或者在調用click函數之前將HTML從內容div加載到變量，然後隱藏該變量和加載的東西內容div。

來源

2016-02-13 F. Certainly.

爲什麼不嘗試使用'setTimeout'函數稍微加載第二個html？ – shu

謝謝。嘗試延遲和setTimout，既沒有工作，但可能會如果元素對象轉換的順序是正確的。 –

你可以用這樣的：那麼

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

第一隱藏的div它是負載的內容後顯示DIV。

來源

2016-02-13 05:28:39

這很接近。 first_stuff.html滑出視圖，然後滑入並由second_stuff.html取代。 –

我們只是稍微重新安排它，它的工作原理。 –

This works：
$（'＃content'）。hide（「slide」，{direction：「right」}，1000，function（）{$（'＃content'）。loa d（ 'second_stuff.html'）}）;
$（'＃content'）。show（「slide」，{direction：「left」}，1000）;

來源

2016-02-15 19:10:18

jquery隱藏當前div的內容，然後加載新內容，然後顯示新內容

回答

相關問題