My first fiddle

by imparator

HTML

<html>
<head>
</head>
<body>
    <button id="button1">Button</button>
    <div id = "div1">
        <h1>animation</h1>
        This is an example of a div that is going to 
        be have its height animated
    </div>
    <input type="text" id="input1"></input><br/>
    <input type="text"></input>
    
</body>
</html>

CSS

#div1 {
    width: 400px; 
    height: 50px; 
    background-color: #66a3d2;
    color: white; 
    font-size:18px; 
    text-align: center;
    padding: 10px;
}

input {
    width: 200px; 
    margin: 10px; 
    padding: 5px;
}

JavaScript

$(document).ready(function() {

    $("#button1").hover(function() {
        $("#div1").animate({

            height: '300px'

        }, 700);
    }, function() {
        $("#div1").animate({
            height: '50px'


        }, 700);
    });

    $("input").keypress(function() {
        $("input").animate({
            width: "500px"
        }, 300);
    });

    $("input").focusout(function() {
        $("input").animate({
            width: "200px"
        }, 300);
    });
    
    jquery('<div>hola</div>');
});