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

您发现此问题是因为您将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>

快乐编码:)