Effects jQuery click on asp.net

Navigation
1

I am a beginner in jQuery and javascript but what I want is that when you click on the button all that blue footer grows up and stays there.

This is my code jQuery : 

<script>
$(function(){
    $("button").click(function () {
        $(".footer").animate({height:"900px"},300);
    });
});
</script>

This is the body of my page: 

<body>
    <form id="form1" runat="server">
    <article class="container ">
    <div class="cuerpo row ">
       <div  class="col-xs-12 col-sm-12 col-md-12 ">
           <div class="text-center">

            <img src="../img/Qapaq.png" style="width:70px;"/>

            <h4 class="titulo">Financiera QapaQ</h4>
               </div>
        </div>
    </div>
    </article>
        <div class="footer container">
            <div class="row">
               <div  class="col-xs-12 col-sm-12 col-md-12 ">
                    <div class="text-center">
            <footer>
                <button>Iniciar Session</button>
                <h3 class="footer-letra">Iniciar Sessión</h3>
            </footer>
                        <//div>
                    </div>
                </div>
        </div>
    </form>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
</body>

This is the image of my page so you can understand me:

I checked in the console and I get this error:

Code: 

<script>
    $(function(){
        $("button").click(function () {
            $(".footer").animate({height:"900px"},300);
        });
    });
</script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <form id="form1" runat="server">
    <article class="container ">
    <div class="cuerpo row ">
       <div  class="col-xs-12 col-sm-12 col-md-12 ">
           <div class="text-center">

            <img src="../img/Qapaq.png" style="width:70px;"/>

            <h4 class="titulo">Financiera QapaQ</h4>
               </div>
        </div>
    </div>
    </article>
        <div class="footer container">
            <div class="row">
               <div  class="col-xs-12 col-sm-12 col-md-12 ">
                    <div class="text-center">
            <footer>
                <button>Iniciar Session</button>
                <h3 class="footer-letra">Iniciar Sessión</h3>
            </footer>
                        <//div>
                    </div>
                </div>
        </div>
    </form>
</body>

Error: 

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
send @ browserLink:37
ajax @ browserLink:37
ajaxAbort @ browserLink:62
abort @ browserLink:62
stop @ browserLink:62
(anonymous) @ browserLink:62
dispatch @ browserLink:37
h @ browserLink:37
    
asked by PieroDev 27.07.2017 в 08:02
source

1 answer

0

If you are new, the best thing you can do is use a plugin before programming.

I attached a link of one that works very fluid:

Demo: link

Git: link

    
answered by 27.07.2017 в 10:46
How do I create a java method to load a jcomboBox with JPA? XML API Product FEED