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函数）。后面的代码正确执行，对话框也显示。但是，进度条的动画不起作用（参见下图）。

我不明白发生了什么。我试图不使用show / hide但.css("display","none")的属性.css("display","block")和$("#dialog")，结果是相同的。

但是如果我没有隐藏$(document).ready上的对话框，动画就可以了。当我在脚本标记中运行它时：

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

对话框直接显示加载页面，如下所示：

这是正确的（我显然不想在开始时但是当你点击按钮但仍然正确显示进度条时）。

Answer 1

您发现此问题是因为您已将progress bar纳入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 id="progressbar"></div>
</div>

对隐藏元素应用任何更改都会反映出来。更好的办法是将进度条移到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>

快乐编码：）