Simple opacity fade between two images of the same size.

Tulip Photo

Mootools Extensions » sfAdFader(element, secondImage, options)


sfAdFader is designed for simple opacity fades between two images of the same size. It works great for simple banner ads.


  1. element - (mixed) The Element for the wrapper div, or its string id.
  2. secondImage - (string) The URL for the second image to fade between.
  3. options - (object, optional) An object containing any of the options below.


fadeDelay integer 3000 The delay between cross-fades, or how long you want an image to stay visible.
Value is in milliseconds (1000 = 1 second).
fadeTime integer 500 The amount of time the fade should take, higher numbers result in longer fades.
Value is in milliseconds (1000 = 1 second).
innerElement string 'img' The tag for the element contained inside the "element" wrapper div. This is the object that will fade in and out.
limit integer -1 The maximum number of times to fade between images. Set to -1 for unlimited looping.



function loader() {
	var demo = new sfAdFader('demoad', '/mootools/samples/photos/tulip2.jpg', {
		fadeDelay: 5000,
		limit: 5
window.addEvent('domready', loader);


<div id="demoad">
	<img src="/mootools/samples/photos/tulip1.jpg" alt="Tulip Photo" />

Files for MooTools v1.2 NEW!

Files for MooTools v1.11