Scriptaculous fade images in onload

**danwednesday** · Jun 13, 2007, 10:08

Hi,

Does anyone know how I can get the following three images to fade in once the page has loaded? I can't seem to find out anywhere on the scriptaculous site / Google!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<script type="text/JavaScript" src="js/prototype.js"></script>
<script type="text/JavaScript" src="js/scriptaculous.js"></script>

</head>

<body>
<img src="img/home_1.jpg" title="" alt="" id="img1" />
<img src="img/home_2.jpg" title="" alt="" id="img2" />
<img src="img/home_3.jpg" title="" alt="" id="img3" />
</body>
</html>

Thanks for any pointers...

**hexburner** · Jun 13, 2007, 17:47

Use jQuery, it's more compact and you don't even need scriptaculous.
Give your images a classname like 'fading-image' or something. And put this in your stylesheet:

Code CSS:

img.fading-image {
    visibility:hidden;
_visibility /**/:/**/visible; /* For IE5.01 so the images are shown */
}

This is all the JavaScript you need:

Code JavaScript:

$(window).bind('load', function(){$('img.fading-image').css({visibility:'visible', opacity:0.01}).fadeTo(2000,1)});

You might have a little problem when using this animation on inline images, so I changed a line in jquery so display:block is set for all animations (default in jquery) except for opacity transitions.

Here's the example: http://fish4code.net/opacity/
And you can download my changed, already compressed, version of jquery from http://fish4code.net/opacity/jquery.js

**danwednesday** · Jun 14, 2007, 04:51

Thanks hexburner. An alternative approach, but it works nonetheless. Thanks.

**gjones** · Jun 14, 2007, 05:01

for reference, with scripty:
You'd want to set: style="display:none;" in the html, and then:

Code:

Event.observe(window,'load',function() {
 $$('#img1, #img2, #img3').invoke('appear');
});

**hexburner** · Jun 14, 2007, 05:55

If you set an element's style to display:none, you'll see that the image is entirely gone. When the page has finished loading (including images), the content at the sides of the images will be pushed aside or down, because at first the image was completely gone. By using visibibility:hidden and a IE5.01 hack you'll always have the space you need, without pushing content out of the way.

The SitePoint Forums have moved.

User Tag List

Thread: Scriptaculous fade images in onload

Thread Tools

Display

Scriptaculous fade images in onload

Bookmarks

Bookmarks

Posting Permissions