Hi

I want to set the height of the div to 1000px. But I cannot.

27.png

index.html
Code:
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>Magic</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui-1.10.0/jquery-ui.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/stylesheet.css"/>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <div id="red">Home</div>
        <div id="blue">Projects</div>
        <div id="yellow">About Me</div>
        <div id="green">Contact</div>
    </body>
</html>
css/stylesheet.css
Code:
div {
    height: 50px;
    width:100px;
    display: inline-block;
}

#red {
    background-color:#FF0000;
}

#blue {
    background-color:#0000FF;
}

#yellow {
    background-color:#E2BE22;
}

#green {
    background-color:#008800;
}
js/script.js
Code:
$(document).ready(function() {
    $('div').mouseenter(function() {
        $(this).animate({
            height: '+=1000px'
        });
    });
    $('div').mouseleave(function() {
        $(this).animate({
            height: '-=1000px'
        });
    });
    $('div').click(function() {
        $(this).toggle(1000);
    });
});