Question

我遇到一个问题，即由于在动画播放完成之前发生了回发，JQuery中的slideUp方法的动画无效。

我的aspx文件中有以下代码

<script type="text/javascript">
function SlideUp() {
    $('.sectionPanel').slideUp("slow", function () { return true; });
}
</script>

<asp:LinkButton runat="server"  CssClass="sideTab" OnClientClick="return SlideUp();" OnClick="SideMenuTab_OnClick" >Breach Details</asp:LinkButton>
<asp:LinkButton runat="server" CssClass="sideTab"  OnClick="SideMenuTab_OnClick" OnClientClick="return SlideUp();">Additional</asp:LinkButton>

<asp:Panel runat="server" ID="uxPanel1" CssClass="sectionPanel" style="background-color:Yellow;">
Panel 1
</asp:Panel>
<asp:Panel runat="server" ID="uxPanel2" CssClass="sectionPanel" style="background-color: Red;">
Panel 2
</asp:Panel>

Answer 1

您可以考虑在返回true之前在javascript中使用延迟。 [链接] http://api.jquery.com/delay/

Answer 2

您可以通过始终返回false来停止LinkButton的PostBack。

<asp:LinkButton runat="server" ID="LinkButton1" OnClientClick="SlideUp(); return false;">Breach Details</asp:LinkButton>

然后你可以通过__doPostBack延迟调用它的PostBack事件来启动按钮点击。

<script type="text/javascript">
    function SlideUp() {
        $('.sectionPanel').slideUp("slow");
        setTimeout(function () { fakePostBack(); }, 1500);
    }

    function fakePostBack() {
        __doPostBack('<%= LinkButton1.UniqueID %>', '');
    }
</script>

这要求LinkButton有一个ID，在你的代码段中他们没有。您需要UniqueID。

在Jquery SlideUp动画之前发生回发

2 个答案: