Question

嗨，我是一个弹出窗口，显示淡入淡出，淡出淡出。问题是什么时候淡出动画也回帖我不想要，我希望它像模型popUp中的属性CancelControlID一样。

注意

我无法将属性CancelControlID设置为关闭按钮，因为它不会执行动画

查看代码

按钮

<asp:Button ID="btnNewPopUp" CssClass="btnNewPopUp" runat="server" Text="Crear Capas"/>
            <asp:ModalPopupExtender BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnOk" runat="server" PopupControlID="pnlPopUpSetLayers" id="mdlPopUp" TargetControlID="btnNewPopUp" >
            </asp:ModalPopupExtender>

小组

<asp:Panel ID="pnlPopUpSetLayers" runat="server" CssClass="popUp" > 
    <table id="tbl" class="tableFinder">
        <tr>
            <td colspan="2">
                <div class="header1">Crear capas</div>
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label ID="lblLayerName" CssClass="formatText" runat="server" Text="Nombre de la Capa"></asp:Label>
            </td>
            <td>
            </td>
        </tr>
    </table>
    <asp:Button ID="btnOk" runat="server" Text="Ok" /> 
    <asp:Button ID="btnClose" runat="server" Text="Close Me" /> 
</asp:Panel>

动画

<asp:AnimationExtender id="MyExtender" runat="server" TargetControlID="btnNewPopUp">
    <Animations>
        <OnClick>
            <FadeIn AnimationTarget="pnlPopUpSetLayers" Duration=".5" Fps="20" />
        </OnClick>
    </Animations>
</asp:AnimationExtender>

<asp:AnimationExtender id="AnimationExtender1" runat="server" TargetControlID="btnClose">
    <Animations>
        <OnClick>
            <FadeOut AnimationTarget="pnlPopUpSetLayers" Duration=".5" Fps="20" />
        </OnClick>
    </Animations>
</asp:AnimationExtender>

Answer 1

我个人讨厌动画扩展器......你有没有想过改成jQuery？如果是这样，那么JavaScript就像这样简单：

jQuery('#<%=pnlPopUpSetLayers.ClientID %>').fadeIn();
jQuery('#<%=pnlPopUpSetLayers.ClientID %>').fadeOut();

Answer 2

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">
    .panel{display: none;}
</style>
<script type="text/javascript">
    $(function () {
        $('#btnShowPanel').click(function (e) {
            e.preventDefault();
            $('#pnlHelloWorld').fadeIn('slow');
        });

        $('#btnClose').click(function (e) {
            e.preventDefault();
            $('#pnlHelloWorld').fadeOut('slow');
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
    <asp:Button ID="btnShowPanel" Text="Show" runat="server" />

    <asp:Panel ID="pnlHelloWorld" CssClass="panel" runat="server">
        Hello World!<br />

        <asp:Button ID="btnClose" Text="Close" runat="server" />
    </asp:Panel>
</div>
</form>

asp.net中的fadein和fadeout

2 个答案: