/    Sign up×
Community /Pin to ProfileBookmark

Fade In/Out on mouse over/out problem

Copy linkTweet thisAlerts:
Jan 01.2009

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>[/CODE]

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.

thanks in advance !!

cheers,
andrew.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@MrNobodyJan 01.2009 — Can't test your code completely because that [B]setBackGrad()[/B] function is missing -- don't know what else. But I'll comment it out and continue looking...
Copy linkTweet thisAlerts:
@MrNobodyJan 01.2009 — Here are the changes so far:
[CODE][COLOR="Red"]var opacity_timer = null;[/COLOR]
function opacity(id, opacStart, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
[COLOR="Red"]opacity_timer = [/COLOR]setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
[COLOR="Red"]opacity_timer = [/COLOR]setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
function DivOver() {
[COLOR="Red"]if (opacity_timer) clearTimeout(opacity_timer);[/COLOR]
theDivMouseCheck = 1;
[COLOR="Red"]opacity_timer = [/COLOR]setTimeout('doDivIn()',250);
}
function DivOut() {
[COLOR="Red"]if (opacity_timer) clearTimeout(opacity_timer);[/COLOR]
theDivMouseCheck = 0;
[COLOR="Red"]opacity_timer = [/COLOR]setTimeout('doDivOut()',250);
}[/CODE]
Copy linkTweet thisAlerts:
@aNdre-WauthorJan 01.2009 — thanks for the reply MrNobody.

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>[/CODE]

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.

thanks again ?
Copy linkTweet thisAlerts:
@aNdre-WauthorJan 01.2009 — okay guys i just got it working like a charm!

thanks so much MrNobody!

Here is the final code for anyone interested in a smooth fade in/out with mouseover:
[CODE]<script type="text/javascript">

var opacity_timer = null;
function opacity(id, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
var opacStart = document.getElementById(id).style.opacity*100;
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', 100, 1000);
}
}

function doDivOut() {
if (theDivMouseCheck==0) {
opacity('theDiv', 25, 1000);
}
}

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>[/CODE]
Copy linkTweet thisAlerts:
@MrNobodyJan 02.2009 — These should not be in there:
[CODE]function doDivIn() {
if (theDivMouseCheck==1) {
opacity('theDiv', 100, 1000);
[COLOR="Red"]clearTimeout(opacity_timer);[/COLOR]
}
}

function doDivOut() {
if (theDivMouseCheck==0) {
opacity('theDiv', 25, 1000);
[COLOR="Red"]clearTimeout(opacity_timer);[/COLOR]
}
}[/CODE]
Copy linkTweet thisAlerts:
@aNdre-WauthorJan 02.2009 — okay just got rid of them.

i just found it still does that stupid blinking efect when you mouse over and them mouseout halfway through the fade ?
Copy linkTweet thisAlerts:
@aNdre-WauthorJan 02.2009 — wait.. i managed to fix that by changing the times on the fades.. i cant get it to blink now ?

hopefully that did the trick..

[CODE]<script type="text/javascript">

var opacity_timer = null;
function opacity(id, opacEnd, millisec) {
var speed = Math.round(millisec / 100);
var timer = 0;
var opacStart = document.getElementById(id).style.opacity*100;
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', 100, 500);
}
}

function doDivOut() {
if (theDivMouseCheck==0) {
opacity('theDiv', 25, 500);
}
}

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>[/CODE]
Copy linkTweet thisAlerts:
@peeyush09Jun 19.2009 — Hello,

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.

Example:

<div id="theDiv" style="background-color:#FF0000; width:200px; height:200px;" onMouseOver="DivOver();" onMouseOut="DivOut();"></div>

<div id="theDiv" style="background-color:#000000; width:200px; height:200px;" onMouseOver="DivOver();" onMouseOut="DivOut();"></div>

<div id="theDiv" style="background-color:#555555; width:200px; height:200px;" onMouseOver="DivOver();" onMouseOut="DivOut();"></div>

It works on only in top div,

Can u plz let me know how can i run it on all div.

Thanks in advance for solutions. Plz reply as soon as possible

Regards,

Peeyush Gupta
Copy linkTweet thisAlerts:
@Logic_AliJun 19.2009 — Hello,

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.

[/QUOTE]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
×

Success!

Help @aNdre-W spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...