It is left as an exercise for the student to integrate it into their project.
---- Begin HTML Doc -----
<html>
<head>
<title>Fade In-Fade Out Example</title>
</head>
<body>
<!-- This div will form an area on the page where
a fade in-fade out affect is desired -->
<div id='OUT' style='width:200px;height:50px;'
onmouseover='OnMouse(1)' onmouseout='OnMouse(-1)'
><big><b> Drive the Mouse here...</b></big></div>
<script>
// Convenience variable
var Undef;
// Convenience function
function Gid(id) {
return document.getElementById(id);
}
// Number of millisecs to hold color...
var Msecs = 100;
// Array of background colors to use...
var Arr = [
"#ffffff","#f0f0f0","#e0e0e0","#d0d0d0","#c0c0c0",
"#b0b0b0","#a0a0a0","#909090","#808080"
];
// Index of next array element to use
var Ind = 0;
// Direction of fade
var Dir = 0;
// Timeout function handle
var TimeOutHandle;
// Operation to perform every Msecs
function OnTimeout() {
// Assign color from array to background
Gid("OUT").style.backgroundColor = Arr [Ind];
// Advance to next color in array
// depending on direction of fade.
if (Dir < 0)
if (Ind > 0)
Ind--; // Go down the array...
else
Dir = 0; // STOP!
else if (Dir > 0)
if (Ind < Arr.length - 1)
Ind++; // Go up the array
else
Dir = 0; // STOP!
// Call OnTimeout() again in Msecs milliseconds
// but only if Dir is not zero...
TimeOutHandle = Dir ? window.setTimeout("OnTimeout()", Msecs) : Undef;
}
// Note:
// Some programmers prefer the form
// window.setTimeout(OnTimeout, Msecs)
// instead of
// window.setTimeout("OnTimeout()", Msecs)
// As far as I know, modern browsers will accept either.
// (thanks to Erik Eckhardt)
// This function is called by onmouseover or onmouseout
// to start the fading affect.
function OnMouse(Dir_) {
Dir = Dir_;
// Is there an already active timeout?
// If no, start one
// otherwise, let the current one do the work...
if (TimeOutHandle == Undef)
OnTimeout();
}
</script>
</body>
</html>
---- End HTML Doc -----
On Saturday, March 16, 2013 2:31:56 AM UTC-4, yahya Kacem wrote:
Hi, and thanks for replaying, but my problem is not that I want a function that runs periodically--indefinitely, what I really need is a function that runs on mouse enter until the end of the array, then stops and stays there, then on mouse leave the function re-run again with different array the reverse of the first one and do the same runs until the end of the array and stops and stays there. So basically as in the plunker that i provided in my first post i can't seem to be able to clear the timeout, the function runs indefinitely.To show a better example what exactly I need here's a plunker with working example, but it have a bug if the targeted element have multiple classes they'll get remover, bug could be seen in this plunker, I hope this clear enough, thanks in advance.
On Thursday, March 14, 2013 7:51:00 PM UTC+1, yahya Kacem wrote:Hi everyone, I need to loop through an array and assign each value to the same variable with delay of 100ms I'm using underscore.js for this here's a example plunker.Thanks in advance.
You received this message because you are subscribed to the Google Groups "JavaScript Forum" group.
To unsubscribe from this group and stop receiving emails from it, send an email to javascript-information+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.