當div顯示時進度條開始

我有一個簡單的jQuery進度條，我正在使用;但我在默認情況下在頁面加載時隱藏的div內使用它，然後在完成表單後顯示。問題是;只能看到進度條的進度取決於用戶完成表單的速度。因爲進度條開始在頁面加載$(document).ready(function() {當div顯示時進度條開始

如何設置它並調用我的進度條加載後div顯示其在？例如。表格完整>下一個div顯示THEN我的進度條開始。以下是我用於酒吧的代碼。

var progress = setInterval(function() { 
    var $bar = $('.bar'); 

    if ($bar.width()==400) { 
     clearInterval(progress); 
     $('.progress').removeClass('active'); 
    } else { 
     $bar.width($bar.width()+40); 
    } 
    $bar.text($bar.width()/4 + "%"); 
}, 900);

任何指針？

來源

2013-06-04 Fred Randall

爲什麼當顯示div而不是$（document）.ready函數內部時，您不能啓動進度條？ – ChrisP

「表單已完成」是指用戶提交表單時的意思嗎？ –

是啊，那就是我在想@ChrisP什麼是寫這個的最好方法;我應該使用一個if語句並且說'如果這個div被顯示加載這個腳本'。 –

試試這個demo。

基本上你需要綁定窗體上的submit事件。在事件處理函數中顯示進度條並做你想做的事情。

function showProgressBar(){ 
    var progress = setInterval(function() { 
     $('#form').hide(); 
     var $bar = $('.bar'); 
     $bar.show(); // show it here 

     if ($bar.width()==400) { 
      clearInterval(progress); 
      $('.progress').removeClass('active'); 
     } else { 
      $bar.width($bar.width()+40); 
     } 
     $bar.text($bar.width()/4 + "%"); 
    }, 900); 

    return false; 
} 

$(window).load(function(){ 
    $('#form').submit(showProgressBar); // bind the submit event 
}

來源

2013-06-04 02:08:23 bigbearzhu

當div顯示時進度條開始

回答

相關問題