Skip to content

Instantly share code, notes, and snippets.

@jasonmelgoza

jasonmelgoza/fadein.html

Created April 19, 2010 17:45
Show Gist options
  • Save jasonmelgoza/371347 to your computer and use it in GitHub Desktop.
Save jasonmelgoza/371347 to your computer and use it in GitHub Desktop.
Download ZIP
Images fade in onload
Raw
fadein.html
<!DOCTYPE HTML>
<html>
<head>
<title>FadingIN</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
window.onload = function() {$('.fade_img').hide().fadeIn(1000);};
});
</script>
<style type="text/css" media="screen">
body { background-color: #fff; font: 14px Helvetica, Arial; color: #333; line-height: 18px; }
body img.fade_img { display: none; }
body code { display: block; margin-bottom: 15px; }
</style>
</head>
<body>
<img class="fade_img" src="http://farm1.static.flickr.com/2/1703693_0412c29a4f.jpg" alt="Nice Flower" title="Flickr Image"/>
<img class="fade_img" src="http://farm3.static.flickr.com/2608/3697785107_579dac8a0f.jpg" alt="Rock On!" title="Flickr Image"/>
<p>Fading Images onload The Jason Way</p>
<strong>script</strong>
<code> $(document).ready(function() {
window.onload = function() {$('.fade_img').hide().fadeIn(1000);};
});</code>
<strong>style</strong>
<code>body img.fade_img { display: none; }</code>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment