Return to Snippet

Revision: 65931
at February 11, 2014 10:39 by winthropite


Initial Code
<html>
<head>
<title>Fade</title>
<style type="text/css">
#fade {
	margin: 0 auto;
	height: 200px;
	width: 200px;
	background-color: purple;
}
</style>
</head>
<body>

<div id="fade">
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">

$(function() {
    
	var opacity = 0;

	var interval = setInterval(function() {
		opacity += .1;

		$('#fade').css('opacity', opacity);

		if (opacity === 1) {
			clearInterval(interval);
		}
	}, 50);


});

</script>

</body>
</html>

Initial URL


Initial Description
A quick demonstration of fading an element in over a set time by starting opacity at 0 and incrementing it + .1 over time.

Initial Title
jQuery element opacity fade in over time (without fadeIn();)

Initial Tags
jquery

Initial Language
jQuery