JavaScript: Slowly Fade Using Opacity

**zephyris** · 11-25-2006, 08:07 AM

hi, i found this script that makes text contents fade out from http://www.richardsramblings.com/?p=486

i was wondering if its possible to make it fade in instead of fade out using this script

script:

Code:

// @name      Slowly Fade
// @version   0.88
// @author    Richard D. LeCour
// @namespace http://www.richardsramblings.com/?p=486


var opacity = 99; // Avoid starting at 100% due to Mozilla bug
var slowly = {
	fadein : function (id) {
		this.fadeLoop(id, opacity);
	},
	fadeLoop : function (id, opacity) {
		var object = document.getElementById(id);
		if (opacity >= 5) {
			slowly.setOpacity(object, opacity);
			opacity -= 4;
			window.setTimeout("slowly.fadeLoop('" + id + "', " + opacity + ")", 99);
		} else {
			object.style.display = "none";
		}
	},
	setOpacity : function (object, opacity) {
		object.style.filter = "alpha(style=0,opacity:" + opacity + ")";	// IE
		object.style.KHTMLOpacity = opacity / 100;				// Konqueror
		object.style.MozOpacity = opacity / 100;					// Mozilla (old)
		object.style.opacity = opacity / 100;					// Mozilla (new)
	}
}

in the html

HTML Code:

<BODY onload=javascript:slowly.fadein('content')>

<DIV id=content>
content here
</div>

**Twey** · 11-25-2006, 02:13 PM

See this script.

**Ges** · 11-26-2006, 09:41 PM

Thanks Twey.
Thats a useful script. It fades faster in Firefox than IE but thats nowt new!

Regards,
Ges.

**Twey** · 11-26-2006, 11:00 PM

Ah, perhaps my arithmetic was a little off when calculating the filter parameter

Thanks for pointing that out, I'll look into it.

**glucarelli** · 11-28-2006, 03:49 PM

Interesting post

What about poping up (when the mainpage of a site is opened) a message box that contents ( remind visitor an event with a coutdown before a given date ) fade out automaticly after xxx seconds.

**Twey** · 11-28-2006, 05:47 PM

Code:

<script type="text/javascript">
window.onload = function() {
  setTimeout(
    function() {
      document.getElementById("msgbox").fadeThread.fadeOut(
        function() {
          this.element.style.display = "none";
        }
      );
    },
    5000
  );
}
</script>

Change the number in red to the number of milliseconds to wait.

**glucarelli** · 11-28-2006, 05:56 PM

Thank you very much , you're the best

Thread: JavaScript: Slowly Fade Using Opacity

Thread Tools

Search Thread

JavaScript: Slowly Fade Using Opacity

Bookmarks

Bookmarks

Posting Permissions