CODEWITHSUNDEEP
jqueryasp.netbuttonlabel
user3690095
user3690095

Reputation:

Fadeout label after an ASP button click jQuery

I have an asp.net button and label. How can I fire a label fadeout when this button is clicked. I am trying to use jquery to do this but it does not work. Here is my code. Any feedback helps. Thanks

$(document).ready(function () {

    $("#btn_submit").click(function () {

        $('#lb_msg').fadeOut(8000, function () {

        });

    });

});


<asp:button id="btn_submit" text="click" runat="server"/>
<asp:label id="lb_msg" runat="server"/>

--- Here is the generated html script

<form method="post" action="test.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/CSZ/HAfM7368Pgeq6mI3czHpU3XISmFKiVp7wr7W6AwrjALoUT7cHc4Mn9x3H7F0LrLoWNdloyuwNBeMxIYMnooWzJvmyaIUlnHa15MOVo=" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qTZ1IHxPMMoDPPo8HExyPgB9YNapexdmtB8/3VSBM+6DDolj7t7VSBMhzXfsJDWsyffjWQYo7kFl8Zm+ZBMPXNEk4uWdk5hRY14+ubqTvjd+IB8OtoRjyPCcu2fAWq7u" />
</div>
<div>

<input type="submit" name="btn_submit" value="click" id="btn_submit" />
<span id="lb_msg">fade me out</span>

</form>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">      </script>
<script type="text/javascript">


$(document).ready(function () {

$("#btn_submit").click(function () {
    $('#' + 'lb_msg').fadeOut(8000, function () {

    });

});

});


</script>

Upvotes: 0

Views: 696

Answers (1)

Sushil
Sushil

Reputation: 2835

Since you want to keep your form submit and the fadeOut event together what you can do is use event.preventDefault() to stop the form from submitting and then you can do your fadeOut animation and on complete call the form.submit.

try this 

$("#btn_submit").click(function(event) {
    event.preventDefault();
    $('#lbl_msg').fadeOut("8000", function() { //Once button has faded, invoke the form submission 
        $("#form1").submit();
    });
});

Hope it helps.

Upvotes: 1

Related Questions