如何添加加載微調現有的jQuery AJAX點擊功能

我想點擊功能淡出內容，在加載微調淡出，淡出加載微調，然後淡入新內容，也有我的網址更改與history.pushstate。 以上所有內容均實現，但顯示我的Spinner。如何添加加載微調現有的jQuery AJAX點擊功能

jQuery('.jax a, .page-navigation a').live('click', function(event) { 
     var url = jQuery(this).attr('href'), 
      title = jQuery(this).attr('title'); 
     jQuery('#main-content').fadeOut('4000', function(){ 
     jQuery('#main-content').load(url+' #main-content', function(){ 
     jQuery('#main-content').fadeIn('4000'); 
     document.title = title; 
     history.pushState({url:url,title:title}, title, url); 
    }); 
}); 
     return false; 
});

我的微調.spinner設置爲顯示：無，我只是不能讓它與我當前的代碼工作。任何幫助，將不勝感激。

來源

2015-05-25 Mia Gilin

嗯......哪兒在這段代碼是你的微調被操縱？您不在任何地方選擇'.spinner'... – lucasnadalutti

此發佈的代碼沒有微調。我希望有人向我展示在哪裏/如何實施它。 –

我明白了。檢查我的答案是否滿足您的需求。它不會在Spinner中褪色，只會顯示並隱藏它，而我認爲這更自然。如果你真的喜歡它淡入淡出，讓我知道，我會更新它。 – lucasnadalutti

請查看是否下面的代碼工作：

jQuery('.jax a, .page-navigation a').live('click', function(event) { 
    var url = jQuery(this).attr('href'), 
    title = jQuery(this).attr('title'); 
    jQuery('#main-content').fadeOut('4000', function(){ 
     // Loading will start, show spinner 
     jQuery('.spinner').show(); 
     jQuery('#main-content').load(url+' #main-content', function(){ 
      // Loading is over, hide spinner 
      jQuery('.spinner').hide(); 
      jQuery('#main-content').fadeIn('4000'); 
      document.title = title; 
      history.pushState({url:url,title:title}, title, url); 
     }); 
    }); 
    return false; 
});

來源

2015-05-25 18:23:25 lucasnadalutti

我曾試過這個，但我的代碼問題是在HTML內。我的

被放置在正在加載，因此沒有顯示的div。當我將旋鈕放在該格外時，它開始顯示出來。謝謝！ –

你可以減少你的隱藏/顯示代碼中加入：

$(document).bind({ 
    ajaxStart: function(){ 
     $("#main-content").hide(); 
     $(".spinner").show(); 
    }, 
    ajaxStop: function(){ 
     $("#main-content").show(); 
     $(".spinner").hide(); 
    } 
});

來源

2015-05-26 14:05:39 brroshan

如何添加加載微調現有的jQuery AJAX點擊功能

回答

相關問題