CODEWITHSUNDEEP
jqueryasp.net
Thomas
Thomas

Reputation: 2118

how to do fadeout in jquery asp.net

I have the below ASP.NET code. When I click on the button, for one or two times at the beginning, the text inside the div div1 was disappearing for a moment, and was displayed again. But then, when I try it now, it never disappears. The text inside the div just stays.

<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>

Upvotes: 1

Views: 870

Answers (1)

Adil
Adil

Reputation: 148110

You have to use ClientID of server control, as your div has attribute runat="server" so asp.net will generate ClientID for it which would be different then orignal. As ClientIDMode is not set to static.

Live demo 

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

Upvotes: 4

Related Questions