addClass在Ajax加載之前

Question

我試圖在jQuery中的瀏覽器中顯示它之前，將一個類添加到包含在加載了Ajax的頁面中的元素。這裏是我的代碼：

$("#landing li.nav4 a").live('click', function() { 
    $("#landing").fadeOut('slow', function(){ 
     $('#agency').load('assets/ajax/agency.html').fadeIn(function(){ 
      $("#agency-main nav li.nav1 a").addClass("nav1-on"); 
     }); 
    }); 
    return false; 
}); 

在此刻發生的是頁面加載，然後添加類和有一個明顯的「閃光」作爲類（背景圖像）被加載。

任何想法如何加載內容，添加類，然後按此順序淡入？

Answer 1

我是jquery noob，所以這更適合我自己的學習 - 爲什麼不呢？

//make sure #agency is defaulted to display:none, or add a line to check this 
$("#landing li.nav4 a").live('click', function() { 
    $('#agency').load('assets/ajax/agency.html', function() { 
    $("#agency-main nav li.nav1 a").addClass("nav1-on"); 
    }); 
    $("#landing").fadeOut('slow', function(){ 
    $('#agency').fadeIn(); 
    }); 
    return false; 
}); 

Answer 2

您可以嘗試創建要在後臺將該類關聯到的元素，然後在需要時插入該元素。

如..

el = $("#landing"); 
//fadeout el 
//remove from html 
//add class 
//insert it back in 

如果你可以寫上的jsfiddle代碼，thta將是非常有益:)

Answer 3

叫我nutbar，但我討厭破譯百萬回調時，所有你需要是事件的管理秩序：

$("#landing li.nav4 a").on('click', function(event) { 
    event.preventDefault(); // better than return false; 
    $agency = $('#agency'); // cache it since we use it twice 

    // fade out the landing div, and when that's done load agency.html into #agency 
    // presumably, #agency is already hidden 
    $("#landing").fadeOut('slow', function(){ 
    $agency.load('assets/ajax/agency.html'); 
    }); 

    // add the class to the nav item 
    $("#agency-main nav li.nav1 a").addClass("nav1-on"); 

    // fade #agency in 
    $agency.fadeIn(); 
}); 

通知2項其他改善建議，你可以採取或離開：

1. 換掉.live（）for .on（），它可用於jQuery 1.7。如果您使用的是較舊的jQuery，則仍應考慮.delegate（）而不是.live（）

2. 使用preventDefault（）可以將點擊事件從冒泡狀態停止爲默認狀態;這在檢查代碼時更高效並且更容易理解。