1
如果您在JSFiddle處看到頁面示例,我已經創建了一個頁面,我已經完成了多個功能,但仍停留在它的時間點。第一次完成後執行jQuery函數
當你打開頁面時,它將首先運行一個加載程序,當加載程序完成時,有多個框顯示一個接一個,但目前沒有發生,Loader加載正常,然後在下一步中心列必須逐一顯示,前四列默認加載,然後其他div加載一個一個。
我的問題是,我如何執行一個函數,並執行另一個功能,一旦前一個完成。
裝載機我有以下幾點:
//--------- process bar animation
var showText = function (target, message, index, interval) {
if (index < message.length) {
$(target).append(message[index++]);
setTimeout(function() { showText(target, message, index, interval); }, interval);
}
}
var width = 100,
perfData = window.performance.timing, // The PerformanceTiming interface represents timing-related performance information for the given page.
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = parseInt((EstimatedTime/1000)%60)*100;
showText("#msg", "Welcome to the Company Group", 0, width);
// Loadbar Animation
$(".loadbar").animate({
width: width + "%"
}, time);
// Loadbar Glow Animation
$(".glow").animate({
width: width + "%"
}, time);
// Percentage Increment Animation
var PercentageID = $("#precent"),
start = 0,
end = 100,
durataion = time;
animateValue(PercentageID, start, end, durataion);
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start? 1 : -1,
stepTime = Math.abs(Math.floor(duration/range)),
obj = $(id);
var timer = setInterval(function() {
current += increment;
$(obj).text(current + "%");
//obj.innerHTML = current;
if (current == end) {
clearInterval(timer);
}
}, stepTime);
}
// Fading Out Loadbar on Finised
setTimeout(function(){
$('.preloader-wrap').fadeOut(300);
$('.loader-wrap').fadeOut(300);
$('.main-wrapper').fadeIn(300);
$('body').addClass('bg');
}, time);
對於下一步我有下面的代碼顯示一個DIV之一:
$(".column-wrapper").each(function(index) {
var $this = $(this);
setTimeout(function() { $this.addClass("show"); }, index * 1000);
});
謝謝!將嘗試這種方法 –