Hi
I want to set the height of the div to 1000px. But I cannot.
index.html
<!--
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
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
$(document).ready(function() {
$('div').mouseenter(function() {
$(this).animate({
height: '+=1000px'
});
});
$('div').mouseleave(function() {
$(this).animate({
height: '-=1000px'
});
});
$('div').click(function() {
$(this).toggle(1000);
});
});