jquery AJAX效果

我想加載頁面與Ajax和它的工作正常沒有問題，但我想添加fadeIn fadeOut效果和加載器gif動畫。jquery AJAX效果

任何人都可以請幫助我做到這一點。我使用下面的代碼。

$(document).ready(function(){ 
    // load index page when the page loads 
    $("#main").load("content.php"); 

    $("#home").click(function(){ 
    // load home page on click 
     $("#main").load("content.php"); 
    }); 
    $("#mediakit").click(function(){ 
    // load about page on click 
     $("#main").load("mm-media-kit.php"); 
    }); 
});

我對jquery沒有經驗。

來源

2012-05-10 Code Lover

在這種情況下，您可以使用http://api.jquery.com/ajaxStart/和http://api.jquery.com/ajaxStop/來顯示和隱藏加載圖像。像這樣

我假設你有一個加載圖像div與ID loading在你的頁面最初隱藏的地方。然後你可以使用上面的這兩個函數來顯示加載圖像，像這樣

//show the loader at the start of ajax request 
$("#loading").ajaxStart(function(){ 
    $(this).show(); 
}); 
//hide the loader when ajax request Completes 
$("#loading").ajaxComplete(function(){ 
    $(this).hide(); 
});

來源

2012-05-10 06:31:36

此代碼很好地顯示和隱藏加載器感謝我聲音:) –

嘗試這樣：

HTML：

<div id='main'></div> 
<div id='mainloading'><img src='loading.gif'></div>

的jQuery：

$("#main").fadeOut().load("content.php", function() { 
    $(this).fadeIn(); 
    $('#mainloading').hide(); 
});

來源

2012-05-10 06:14:34 NAVEED

你是否正確設置加載圖像路徑代替'loading.gif'在html部分？ – NAVEED

我的錯誤。它的工作完全沒有問題。非常感謝。只有一件事是爲了獲得更多的完美。它在加載時給予某種混蛋而不是任何理由的淡入淡出？ –

嗯。不知道。請嘗試像$（this）.fadeIn（'slow'）;'，或者需要做更多的研究。 – NAVEED

您可以在不透明度的CSS屬性使用動畫淡入/根據需要提供。（負載之前設置不透明度爲零，然後進行動畫處理回1對您的負載回調。）

$("#main").css('opacity', 0).load("mm-media-kit.php", function() { 
    $("#main").animate({ opacity: 1}, 'slow'); 
});

功能淡入/淡出基本上都是針對上述速記，但我想你不真的想在這種情況下淡出。

來源

2012-05-10 06:14:47 McGarnagle

回答

相關問題