jquery的UI進度條沒有與asp按鈕動畫

Question

我試圖使用jQuery UI進度條，當我點擊一個asp:Button時，會顯示在jQuery UI對話框中。

的按鈕聲明如下：

<asp:Button ID="Button2" runat="server" Text="Télécharger" 
    CausesValidation="False" onclick="Button2_Click" OnClientClick="javascript:displayDialog()"/> 

對話框聲明如下：

<div id="dialog" title="Attente de téléchargement"> 
<p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p> 
<div id="progressbar"></div> 
</div> 

，最終的javascript：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#dialog").hide(); 
    }); 

    function displayDialog() { 
     $("#dialog").dialog(); 
     $("#progressbar").progressbar({ 
      value: false 
     }); 
     $("#dialog").show(); 
    } 
</script> 

這似乎做工精細（因爲onclick和OnClientclick函數都被調用）。後面的代碼正確執行，對話框也顯示出來。然而，進度條的動畫不起作用（見下圖）。

我不明白這是怎麼回事。我試圖不使用顯示/隱藏，但$("#dialog")的屬性.css("display","none")和.css("display","block")，結果是相同的。

但是，如果我不隱藏對話框$(document).ready動畫工作正常。當我在腳本標籤上運行此：

$(document).ready(function() { 
     $("#dialog").dialog(); 
     $("#progressbar").progressbar({ 
      value: false 
     }); 
    }); 

對話框直接顯示在頁面像這樣的裝載：

這是正確的（我顯然不希望它在開始，但是當你點擊按鈕但仍然進度條顯示正確時）。

Answer 1

你發現這個問題，因爲你已經在dialog div

錯誤代碼內封閉的progress bar：

<div id="dialog" title="Attente de téléchargement"> 
    <p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p> 
    <div id="progressbar"></div> 
</div> 

應用到隱藏元素的任何更改將reflect.so更好的事情做的是將進度欄移到dialog div之外。

更正後的代碼：

<div id="dialog" title="Attente de téléchargement"> 
    <p>Le fichier est en cours de préparation, le téléchargement devrait commencer sous peu.</p> 
</div> 
<div id="progressbar"></div> 

編碼快樂:)