Trouble with .show() method

Trouble with .show() method

Hi all,

I am new but thanks to code academy, I feel that I have a decent grasp of Jquery and Javascript. I am building a very simple test site to practice my skills but I have run into a problem. I am sure I must be overlooking something but I'm ready to pull my hair out!

I am trying to load up a <div> element using the .show() method with the clip effect, however it is doing nothing. The <div> just loads up as if no effects are being applied to it. When swap the .show() method for .hide() with the same parameters entered it works just fine. Any ideas ?

HTML

<!doctype html>
<html>

<head>
<title>Test Page.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>

<body>
 <div id="blind"></div>
</body>


</html>

CSS

body{
margin: 0;
padding:0;
background-color:#3e3b3c;
}

#blind{
background-color:#000000;
width:100%;
height:10%;
}

JS/JQUERY

$(document).ready(function(){
$('body').height($(window).height());
$('body').width($(window).width());
$('#blind').show('clip',{direction:'horizontal'},1000);
});