crazy4groovy
6/7/2012 - 2:54 PM

simple CSS3 fade-in/out transition

simple CSS3 fade-in/out transition

css3FadeTransition.html
content_copyfile_download
<html>
<head>
	<!-- fades well in Firefox and Chrome, hide/show only in Opera, no animation in IE 8 (?) -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<style>
	#content {
		opacity: 0;
		-moz-transition: opacity .5s ease-in-out;
		-webkit-transition: opacity .5s ease-in-out;
		transition: opacity .5s ease-in-out;
	}
	 
	#content.faded-in {
	  opacity: 1;
	}
	</style>
	<script>
	$(function() {
		setInterval(function() {
			$('#content').toggleClass('faded-in');
		}, 2000);
	})
	</script>
</head>
<body>
	<div id="content">
	Hello there
	</div>
</body>
</html>