淡入阿賈克斯開始動畫

我使用動畫來突出AJAX數據刷新。然而，當大部分時間刷新不到半秒鐘時，這有點突兀。我想淡出動畫

這裏是由以前的答案提供的最新小提琴： DEMO

因此，我們必須代碼：

$(document).ajaxStart(function() { 
    $("body").addClass("loading"); 
}); 
$(document).ajaxStop(function() { 
    $("body").removeClass("loading"); 
});

我已經嘗試了數的東西，如把附加paramters到加載類 addClass（「加載」，500） addClass（「加載」，500500）

和丘比特ng .fadeIn（500）; 在許多地方，但它似乎沒有任何區別。

如何淡入DIV？

來源

2013-03-28 Chris Nevill

請參閱http://stackoverflow.com/questions/1248542/jquery-animate-with-css-class-only-without-explicit-styles – noj 2013-03-28 09:38:50

使用jQuery的delay()並使您的.modal元素淡入和淡出。

這裏是你的小提琴的更新版本：http://jsfiddle.net/gk3RL/1/。

它相當於此：$.ajaxStart(function() { $('.modal').delay(500).fadeIn(); }); jQuery將等待半秒做淡入之前在$.ajaxStop你可能需要做stop()防止延遲fadeIn燒製而成，如果請求的延遲時間內完成。

遺憾的是，delay()無法取消。所以也許最健壯的解決方案是使用JavaScript自己的setTimeout，可以通過致電clearTimeout取消。

，那麼你可以這樣做：

var timeOut; 

$.ajaxStart(function() { 
    timeOut = setTimeout(function() { 
     $('.modal').fadeIn(); 
    }, 500); // Waits for half a second before fading .modal in 
}); 

$.ajaxStop(function() { 
    clearTimeout(timeOut); // Cancels if request finished < .5 seconds 
    $('.modal').fadeOut(); 
});

來源

2013-03-28 09:42:09 Knelis

清除超時的良好通話。這完全謝謝你 – 2013-03-28 10:02:26

你需要真正消失模態在

CSS：

/* Start by setting display:none to make this hidden. 
    Then we position it in relation to the viewport window 
    with position:fixed. Width, height, top and left speak 
    speak for themselves. Background we set to 80% white with 
    our animation centered, and no-repeating */ 
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(255, 255, 255, .8) url('http://sampsonresume.com/labs/pIkfp.gif') 50% 50% no-repeat; 
} 
/* When the body has the loading class, we turn 
    the scrollbar off with overflow:hidden */ 
body.loading { 
    overflow: hidden; 
}

的Javascript：

$(document).ajaxStart(function() { 
    $("body").addClass("loading"); 
    $('.modal').fadeIn(500); 
}); 
$(document).ajaxStop(function() { 
    $("body").removeClass("loading"); 
    $('.modal').fadeOut(500); 
}); 

// Initiates an AJAX request on click 
$(document).on("click", function() { 
    $.post("/mockjax"); 
}); 


// http://code.appendto.com/plugins/jquery-mockjax 
$.mockjax({ 
    url: '/mockjax', 
    responseTime: 2000 
});

Here's the fiddle.

來源

2013-03-28 09:43:40 Licson

你可以這樣來做：

function startAjaxLoader() { 
    $("#ajaxLoader").delay(500).fadeIn(750); 
} 

function stopAjaxLoader() { 
    $("#ajaxLoader").stop(true).hide(); 
} 

$(document).ajaxStart(function() { 
    startAjaxLoader(); 
}).ajaxComplete(function() { 
    stopAjaxLoader(); 
}).ajaxError(function(ajaxErrorEvent, jqXHR) { 
    stopAjaxLoader(); 
    // Display error 
});

.stop(true)取消運行或排隊的所有事件和動畫的方法。

來源

2016-06-14 14:16:36

淡入阿賈克斯開始動畫

回答

相關問題