hello all
after attempting, and failing, and attempting again, and failing, after several hours im finally seeking help lol.
my goal is to create smooth fading effect for a div element i have on a web app i am developing.
all is well when it comes to the actual fading of the element,
my problem is when the mouse leaves the div and returns onto it before the fading has completed.
my code for the element is as follows:
Code:
<script type="text/javascript">
function opacity(id, opacStart, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function doLoad() {
changeOpac(25, 'theDiv');
setBackGrad();
}
var theDivMouseCheck = 0;
function DivOver() {
theDivMouseCheck = 1;
setTimeout('doDivIn()',250);
}
function DivOut() {
theDivMouseCheck = 0;
setTimeout('doDivOut()',250);
}
function doDivIn() {
if (theDivMouseCheck==1) {
opacity('theDiv', 25, 100, 1000);
}
}
function doDivOut() {
if (theDivMouseCheck==0) {
opacity('theDiv', 100, 25, 1000);
}
}
</script>
<body onLoad="doLoad();">
<div id="theDiv" style="background-color:#FF0000; width:200px; height:200px;" onMouseOver="DivOver();" onMouseOut="DivOut();"></div>
if you run the code, and mouse over and out of the red square quickly in several successions, the box will literally **** itself, and will almost appear to blink.
what i believe will solve the problem is a way to stop the fading, once the function is called again, and resume it from the current opacity value but fading towards the new target opacity.
i tried many ways to do this but just cant seem to get it
the timeouts that i have put in the code were an attempt to fix the problem, but i found give a cool delayed effect.
so im asking if any of you guys have any ideas that might help me out here..
i have only had afew problems which i couldn't find the answer to, but i came here and you guys helped me out really quickly.
Can't test your code completely because that setBackGrad() function is missing -- don't know what else. But I'll comment it out and continue looking...
Sorry about that, forgot to take it out of the code, just ignore setBackGrad().
That code works pretty good, i modified it ever so slightly, and im gonna work it on abit more.
It still does a funny blink thing but now only once instead of according to the amount of times you mouse in and out.
Code:
<script type="text/javascript">
var opacity_timer = null;
function opacity(id, opacStart, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
opacity_timer = setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
opacity_timer = setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function doLoad() {
changeOpac(25, 'theDiv');
}
var theDivMouseCheck = 0;
function doDivIn() {
if (theDivMouseCheck==1) {
opacity('theDiv', 25, 100, 1000);
clearTimeout(opacity_timer);
}
}
function doDivOut() {
if (theDivMouseCheck==0) {
opacity('theDiv', 100, 25, 1000);
clearTimeout(opacity_timer);
}
}
function DivOver() {
if (opacity_timer) clearTimeout(opacity_timer);
theDivMouseCheck = 1;
opacity_timer = setTimeout('doDivIn()',250);
}
function DivOut() {
if (opacity_timer) clearTimeout(opacity_timer);
theDivMouseCheck = 0;
opacity_timer = setTimeout('doDivOut()',250);
}
</script>
<body onLoad="doLoad();">
<div id="theDiv" style="background-color:#FF0000; width:200px; height:200px;" onMouseOver="DivOver();" onMouseOut="DivOut();"></div>
I believe the problem is now the fading function, so i think you need to write it to fade from the current opacity to the target opactiy, cutting out the opacStart variable.
I have use this script in my website, it works good with very cool fading effect.
but unfortunately it works only on one div, not in multiple div.
It's hard-coded to work on one element only, and would have to be re-written to handle multiple instances.
You could try the concept of doing nothing to the hovered element: http://scripterlative.com?fadearound
Where used, return should be executed unconditionally and always as the last statement in the function.
That's my signature, it's not part of the damn post!
Reply With Quote
Fading Background Image in div
Originally Posted by peeyush09
Bookmarks