www.webdeveloper.com
Results 1 to 10 of 10

Thread: Fade In/Out on mouse over/out problem

  1. #1
    Join Date
    Nov 2006
    Posts
    45

    Fade In/Out on mouse over/out problem

    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.

    thanks in advance !!

    cheers,
    andrew.

  2. #2
    Join Date
    Feb 2008
    Posts
    1,666
    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...

  3. #3
    Join Date
    Feb 2008
    Posts
    1,666
    Here are the changes so far:
    Code:
    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 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);
    }
    Last edited by MrNobody; 01-01-2009 at 12:56 PM.

  4. #4
    Join Date
    Nov 2006
    Posts
    45
    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>
    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

  5. #5
    Join Date
    Nov 2006
    Posts
    45
    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>
    Last edited by aNdre-W; 01-01-2009 at 06:02 PM.

  6. #6
    Join Date
    Feb 2008
    Posts
    1,666
    These should not be in there:
    Code:
    function doDivIn() {
    	if (theDivMouseCheck==1) {
    		opacity('theDiv', 100, 1000);
    		clearTimeout(opacity_timer);
    	}
    }
    
    function doDivOut() {
    	if (theDivMouseCheck==0) {
    		opacity('theDiv', 25, 1000);
    		clearTimeout(opacity_timer);
    	}
    }

  7. #7
    Join Date
    Nov 2006
    Posts
    45
    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

  8. #8
    Join Date
    Nov 2006
    Posts
    45
    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>

  9. #9
    Join Date
    Jun 2009
    Posts
    1

    Unhappy Fading Background Image in div

    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

  10. #10
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    Quote Originally Posted by peeyush09 View Post
    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.
    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!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles