delay and fadein

delay and fadein

Hello, this is the code i am using to make my div delay and fadein, but it does not seem to work. Please help me in correcting thr code.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#a').delay(1000).fadeIn(2200);
$('#b').delay(1200).fadeIn(2200);
});
</script>
<style type="text/css">
.a{
text-align:left;
}
.b{
text-align:center;
color:#06F
}
</style>
</head>

<body>
<div>
<p class="a"> Hello</p>
<p class="b"> Hello</p>
</div>
</body>
</html>