Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Javascript Codes Library >> Text >> MiniDaemon Text Fade in / Fade out


Code Snippet </> Info


Snippet Name: MiniDaemon Text Fade in / Fade out

Description: Have your text content fade in or fade out using using input buttons.
Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note:

Author: Mozilla Developer Network

Last Modified: 2019-12-10 01:14:57

Language: javascript

Highlight Mode: javascript

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>MiniDaemon Text Fade in / Fade out</title> <script type="text/javascript"> <!-- // Begin MiniDaemon Text Fade in / Fade out // == This Script Free To Use Providing This Notice Remains == // // == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == // // == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == // // == Created by: Mozilla Developer Network : https://developer.mozilla.org/en-US/docs/DOM/window.setInterval : Creative Commons License == // function MiniDaemon (oOwner, fTask, nLen, nRate) { if (!(this && this instanceof MiniDaemon)) { return; } if (arguments.length < 2) { throw new TypeError("MiniDaemon - not enough arguments"); } if (oOwner) { this.owner = oOwner }; this.task = fTask; if (nLen > 0) { this.length = Math.floor(nLen); } if (isFinite(nRate) && nRate > 0) { this.rate = Math.floor(nRate); } } MiniDaemon.prototype.owner = null; MiniDaemon.prototype.task = null; MiniDaemon.prototype.length = Infinity; MiniDaemon.prototype.rate = 100; /* These properties should be read-only */ MiniDaemon.prototype.SESSION = -1; MiniDaemon.prototype.INDEX = 0; MiniDaemon.prototype.PAUSED = true; MiniDaemon.prototype.BACKW = true; /* Global methods */ MiniDaemon.forceCall = function (oDmn) { oDmn.INDEX += oDmn.BACKW ? -1 : 1; if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn.BACKW) === false || oDmn.isAtEnd()) { oDmn.pause(); return false; } return true; }; /* Instances methods */ MiniDaemon.prototype.isAtEnd = function () { return this.BACKW ? isFinite(this.length) && this.INDEX < 1 : this.INDEX + 1 > this.length; }; MiniDaemon.prototype.synchronize = function () { if (this.PAUSED) { return; } clearInterval(this.SESSION); this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this); }; MiniDaemon.prototype.pause = function () { clearInterval(this.SESSION); this.PAUSED = true; }; MiniDaemon.prototype.start = function (bReverse) { var bBackw = Boolean(bReverse); if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) { return; } this.BACKW = bBackw; this.PAUSED = false; this.synchronize(); }; --> </script> <style type="text/css"> BODY {font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000;} #content {margin:0px 15px 0px 15px; padding:15px 15px 15px 15px;} #snapbuilder_div { visibility:hidden; } </style> </head> <body> <div id="content"> <h3>MiniDaemon Text Fade in / Fade out</h3> <p> <input type="button" onclick="fadeInOut.start(false /* optional */);" value="fade in" /> <input type="button" onclick="fadeInOut.start(true);" value="fade out"> <input type="button" onclick="fadeInOut.pause();" value="pause" /> </p> <div id="snapbuilder_div">Your Text Here</div> <script type="text/javascript"> function opacity (nIndex, nLength, bBackwards) { this.style.opacity = nIndex / nLength; if (bBackwards ? nIndex === 0 : nIndex === 1) { this.style.visibility = bBackwards ? "hidden" : "visible"; } } var fadeInOut = new MiniDaemon(document.getElementById("snapbuilder_div"), opacity, /* length: */ 8, /* frame-rate: */ 300); </script> <p> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_178.html">MiniDaemon Text Fade in / Fade out Code Snippet</a> page. ] </p> </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library