SweetVision Javascript and other web programming topics

Using MooTools to fade between two images

Fading between two images is actually a fairly simple task with MooTools. The first thing you need to do is setup up two DIV tags that are absolutely positioned over one another inside another DIV tag that uses default placement. Then you place your image tags inside each of the absolutely positioned DIV tags. Each of the DIV tags needs to have an id attribute so they can be referenced in your javascript code.

The HTML for the task will look like this:

This gives you two DIV tags that will stack on top of one another but the DIV they are inside of will flow with the page. One of the DIV tags starts with an opacity of zero and the other with an opacity of one.

Next you will need a way to make one image disappear and the other appear. We do this by using the MooTools effects. MooTools allows you to animate the change of a style from one value to the next. The easiest way to do this is to use the effect member available on any element accessed with MooTools. To transition from one image to the other smoothly we animate the opacity of each DIV element in opposite directions one becoming fully opaque and the other becoming fully transparent. We do that with the following function:

First you decide which DIV tag will become Transparent and which one will be visible. Next there are two lines of code to check for an active animation and stop any animations that are already running, before we start some new animations. The last two lines create an animation attached to each DIV, going from the current opacity to the specified Opacity, and sets the animation object to the DIV tags .fx member. See the full code below or check out the example.

<br /> <script type=”text/javascript” src=”/js/mootools-release-1.11.js” language=”javascript”></script><br /> <script language=”javascript”><br /> function show(whichOne){<br /> if(whichOne == 1){<br /> tDiv = “div1″;<br /> vDiv = “div2″;<br /> }else{<br /> tDiv = “div2″;<br /> vDiv = “div1″;<br /> }<br /> if($(tDiv).fx){$(tDiv).fx.stop();}<br /> if($(vDiv).fx){$(vDiv).fx.stop();}<br /> $(tDiv).fx = $(tDiv).effect(’opacity’, {duration: 2000}).start(0);<br /> $(vDiv).fx = $(vDiv).effect(’opacity’, {duration: 2000}).start(1);<br /> }<br /> </script><br /> <div style=”background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;” onclick=”show(1);”>Show 1</div><br /> <div style=”background-color:#aaaaaa; border: 1px solid #444; cursor: pointer;” onclick=”show(2);”>Show 2</div><br /> <div style=”height:112px;”><br /> <div id=”div1″ style=”position:absolute; opacity: 0;”><img id=”image1″ src=”http://www.sweetvision.com/wordpress/wp-content/uploads/2008/03/image1.jpg” /></div><br /> <div id=”div2″ style=”position:absolute; opacity: 1;”><img id=”image2″ src=”http://www.sweetvision.com/wordpress/wp-content/uploads/2008/03/image2.jpg” /></div><br /> </div><br />

Update: By popular demand I have created an new post that covers fading multiple images here: How to: Use MooTools to Fade Between Multiple Images