使用AJAX和動畫加載內容 - jQuery

我需要一些幫助爲我的代碼添加一些動畫。現在它的作用就像 - 點擊鏈接 - >淡入文本 - >點擊另一個鏈接 - >淡出當前文本 - >淡入淡出的新文本。

我想是這樣的 - 點擊鏈接 - >＃內容動畫到XX：PX（取決於加載內容的高度） - >淡入文本 - >點擊鏈接 - >電流文字淡出和＃內容動畫了 - >＃內容動畫到XX：PX（取決於加載內容的高度） - 在文本

這是迄今爲止碼>褪色...

更新這裏是jsfiddle - 但ajax的東西不能工作http://jsfiddle.net/jelm/7zLW5/2/ 或者你可以在我的測試頁看看http://landetdigital.se/olaselmen/

$(document).ready(function() { 
    $('.menu li a').click(function() { 

     $('#contentHolder').fadeOut("fast"); 
     var targetPage = $(this).attr('href'); 

    setTimeout(function() { 
     $('#content').load(targetPage, function() { 
      $('#contentHolder').fadeIn("slow"); 
     }); 
    }); 

return false; 
}); 
});

來源

2011-06-13 jelm

創建一個jsfiddle.net樣本，以便可以輕鬆地進行測試和調整。 – Zlatev 2011-06-13 22:53:30

這可以通過使用回調中淡入（）和淡出來實現（）。

例如，如果你想要的東西做$('#contentHolder').fadeIn('slow')後，你可以做到這一點通過以下方式：

$('#contentHolder').fadeIn('slow',function(){ 
    alert('#contentHolder was faded in!'); 
})

來源

2011-06-14 09:22:13 Kokos

我會做什麼，以獲得新的內容的合適的高度是把在剛剛加載的內容隱藏div並檢索該高度。然後將所顯示的div動畫到正確的高度，並刪除臨時的一個。

獲得一個div的高度與：

.css({ display: 'none' });

..是行不通的，使用：

.css({'position':'absolute','visibility':'hidden', 'display':'block'});

..instead。

來源

2011-06-14 09:27:26

使用AJAX和動畫加載內容 - jQuery

回答

相關問題