caioerick/Clica e Aparece.html

## Clica e Aparece.html
<html>
<head>
<style type="text/css">
    p.neat {
    display: none;
    clear: both;
    margin: 1em 0;
    padding: 1em 15px;
    width:100px;
    background: #0F67A1;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">

$(document).ready(function () {
$('#animate-fade').click(function () {
$('.neat').animate({ opacity : 'toggle' }, 'slow');
});

$('#animate-slide').click(function () {
$('.neat').slideToggle('slow');
});

$('#animate-both').click(function () {
$('.neat').animate({
opacity: 'toggle',
height: 'toggle'
});
});
});


</script>

</head>
<title>Fade com jQuery</title>
<body>
<input type="button" id="animate-slide" value="slide" />
<input type="button" id="animate-fade" value="fade" />
<input type="button" id="animate-both" value="both" />

<p class="neat">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

</body>
</html>
	<html>
	<head>
	<style type="text/css">
	p.neat {
	display: none;
	clear: both;
	margin: 1em 0;
	padding: 1em 15px;
	width:100px;
	background: #0F67A1;
	}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
	<script type="text/javascript">

	$(document).ready(function () {
	$('#animate-fade').click(function () {
	$('.neat').animate({ opacity : 'toggle' }, 'slow');
	});

	$('#animate-slide').click(function () {
	$('.neat').slideToggle('slow');
	});

	$('#animate-both').click(function () {
	$('.neat').animate({
	opacity: 'toggle',
	height: 'toggle'
	});
	});
	});


	</script>

	</head>
	<title>Fade com jQuery</title>
	<body>
	<input type="button" id="animate-slide" value="slide" />
	<input type="button" id="animate-fade" value="fade" />
	<input type="button" id="animate-both" value="both" />

	<p class="neat">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
	eiusmod tempor incididunt ut labore et dolore magna aliqua.
	</p>

	</body>
	</html>