javascript fade text onmouseover without jquery

Question

Hi I was wondering if anyone can help me with my problem. I want my rollover text to slowly fade from one text to the next. Visit my website to see what I'm talking about ~ http://neutralmotive.com/

If you hover over 'neutral' it quickly & instantly swaps the text to 'media'. same thing happens when you hover over 'motive', it quickly & instantly swaps to 'design'.

I want the text to slowly & smoothly fade from one text to the next when the mouse hovers over the text. I am using simple javascript without the use of ajax or jquery

please help.

score 3 · Answer 1 · edited May 23 '17 at 10:24

If you're not eager to support every single browser out there, add an animated class to your spans and use css:

.hide{
    visibility: hidden;
    opacity: 0;
}
.show{
    visibility: visible;
    opacity: 1;
}
.animated{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

drawback:

both .hide and .show are displayed, so they need to be absolutely positionned

You could also do this with javascript by toggling classes programmatically.

Here is some useful sources:

Callback on CSS transition

score 3 · Answer 2 · answered Jan 04 '13 at 08:50

use following code for fading slowly:

var opacity = 99; // Avoid starting at 100% due to Mozilla bug
var slowly = {
    fadein : function (id) {
        this.fadeLoop(id, opacity);
    },
    fadeLoop : function (id, opacity) {
        var object = document.getElementById(id);
        if (opacity >= 5) {
            slowly.setOpacity(object, opacity);
            opacity -= 4;
            window.setTimeout("slowly.fadeLoop('" + id + "', " + opacity + ")", 99);
        } else {
            object.style.display = "none";
        }
    },
    setOpacity : function (object, opacity) {
        object.style.filter = "alpha(style=0,opacity:" + opacity + ")"; // IE
        object.style.KHTMLOpacity = opacity / 100;              // Konqueror
        object.style.MozOpacity = opacity / 100;                    // Mozilla (old)
        object.style.opacity = opacity / 100;                   // Mozilla (new)
    }
}

then just sent id of the element that contain your desire text at desired event. for more info you can check: http://www.dynamicdrive.com/forums/showthread.php?15192-JavaScript-Slowly-Fade-Using-Opacity

javascript fade text onmouseover without jquery

2 Answers2