Cubly Cubly - 1 year ago 44
Javascript Question

How to apply a transition effect to some text when hovering over an icon?

I am designing a webpage and have got the icons and text how I like (no assets yet).

I have it setup so when I hover over an icon, it will change the main text to a different phrase, but it does it suddenly, I was wondering if I could setup a transition effect for the main text because I can't figure out how to do it with CSS that doesn't interfere with what I have.

Here is my code so far:

Basically, when the text changes from TBD to Icon1 (when you hover over the image), I would like that text to fade over instead of being sudden!

Could this be done with my existing JavaScript code?

function setTextIcon1(){
document.getElementById("maintext").innerHTML = "Icon1";

function setTextIcon2(){
document.getElementById("maintext").innerHTML = "Icon2";

function setTextIcon3(){
document.getElementById("maintext").innerHTML = "Icon3";

function setTextDefault(){
document.getElementById("maintext").innerHTML = "TBD";

Everything I tried with CSS interferes with something else. I probably have the code really convoluted, which I am sorry for as I am quite new to it all!


Answer Source

You can do it with JQuery:

function setTextIcon1(){
    $('#maintext').fadeOut('slow', function () {