FatihGoktas/Jquery - How to add div with slide animation?

## Jquery - How to add div with slide animation?
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer  {

            width: 700px;
            height: 1000px;
            border: 2px dashed green;
            margin: 20px;
        }

        .box    {
            widht: 100px;
            height: 80px;
            border: 2px solid green;
            margin: 20px;
        }
    </style>
</head>
<body>
  <input type='button' id='btn' value='click' />
    <div class='outer'></div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('#btn').click(function()  {
	$box = $("<div class='box'></div>");
	$('.outer').prepend($box);
	$box.hide().slideDown(3000);
});
</script>

</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	.outer {

	width: 700px;
	height: 1000px;
	border: 2px dashed green;
	margin: 20px;
	}

	.box {
	widht: 100px;
	height: 80px;
	border: 2px solid green;
	margin: 20px;
	}
	</style>
	</head>
	<body>
	<input type='button' id='btn' value='click' />
	<div class='outer'></div>
	</body>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$('#btn').click(function() {
	$box = $("<div class='box'></div>");
	$('.outer').prepend($box);
	$box.hide().slideDown(3000);
	});
	</script>

	</html>