如何在jquery asp.net中进行淡出

时间:2012-11-29 12:54:03

标签: jquery asp.net

我有以下ASP.NET代码。当我点击按钮,开头一两次,div div1 中的文字消失片刻,然后再次显示。但是,当我现在尝试它时,它永远不会消失。 div中的文字就一直存在。

<head runat="server">
<title></title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(document).ready(
        function () {
            $("#div1").css("color", "red");
            $("#btn").click(function () {
                $("#div1").fadeOut("slow");
            });
        });
</script>

<body>
<form id="form1" runat="server">
<div class="ab" id="divTest" runat="server">test</div>
    <asp:Button ID="btn" runat="server" Text="GET" />
    <div id="div1" runat="server"> 
        <div>test new </div>                
        <div id="divTestArea1">
            <b>Bold text</b>
            <i>Italic text</i>
            <div id="divTestArea2">
                    <b>Bold text 2</b>
                    <i>Italic text 2</i>
                    <div>
                            <b>Bold text 3</b>
                    </div>
            </div>
        </div>  
   </div>
</form>

1 个答案:

答案 0 :(得分:4)

您必须使用服务器控件的ClientID,因为您的div具有属性runat =&#34; server&#34;所以asp.net会为它生成ClientID,它会与orignal不同。由于ClientIDMode未设置为静态。

Live demo

$(document).ready(
    function () {
        $("#<%= div1.ClientID %>").css("color", "red");
        $("#<%= btn.ClientID %>").click(function () {
            $("#<%= div1.ClientID %>").fadeOut("slow");
            return false; // to stop postback
        });
 });