Fade in Fade out effect for Text Javascript

I'm using a plugin which makes the text fade in and out in wordpress, and I'm trying to change the code as it goes from white to black, I want it to go from white to transparent, tried to change the fade in and fade out codes, but didn't work

here is the JS

var FadeIn_FadeInterval;



window.onload = FadeIn_FadeRotate



var FadeIn_Links;

var FadeIn_Titles;

var FadeIn_Cursor = 0;

var FadeIn_Max;





function FadeIn_FadeRotate() 

{

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

  FadeIn_Links = new Array();

  FadeIn_Titles = new Array();

  FadeIn_SetFadeLinks();

  FadeIn_Max = FadeIn_Links.length-1;

  FadeIn_SetFadeLink();

}



function FadeIn_SetFadeLink() {

  var ilink = document.getElementById("FadeIn_Link");

  ilink.innerHTML = FadeIn_Titles[FadeIn_Cursor];

  ilink.href = FadeIn_Links[FadeIn_Cursor];

}



function FadeIn_Ontimer() {

  if (FadeIn_bFadeOutt) {

    FadeIn_Fade+=FadeIn_FadeStep;

    if (FadeIn_Fade>FadeIn_FadeOut) {

      FadeIn_Cursor++;

      if (FadeIn_Cursor>FadeIn_Max)

        FadeIn_Cursor=0;

      FadeIn_SetFadeLink();

      FadeIn_bFadeOutt = false;

    }

  } else {

    FadeIn_Fade-=FadeIn_FadeStep;

    if (FadeIn_Fade<FadeIn_FadeIn) {

      clearInterval(FadeIn_FadeInterval);

      setTimeout(Faderesume, FadeIn_FadeWait);

      FadeIn_bFadeOutt=true;

    }

  }

  var ilink = document.getElementById("FadeIn_Link");

  if ((FadeIn_Fade<FadeIn_FadeOut)&&(FadeIn_Fade>FadeIn_FadeIn))

    ilink.style.color = "#" + ToHex(FadeIn_Fade);

}



function Faderesume() {

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

}



function ToHex(strValue) {

  try {

    var result= (parseInt(strValue).toString(16));



    while (result.length !=2)

            result= ("0" +result);

    result = result + result + result;

    //alert(result);

    return result.toUpperCase();

  }

  catch(e)

  {

  }

}

and this is the php code for it

and the codes are as follows

Fade out : 255
Fade in: 0
fade: 0

I've tried to change the numbers but it stops working

asked Jan 2 at 18:55

Joey Arnanzo

2712

1

Can you post a working example with HTML or what you did so far?

– Armel
Jan 2 at 18:59

Transparent isn't a hex color.

– Diodeus - James MacFarlane
Jan 2 at 19:01

1

Google for transition css and you can implement if for the color attribute - It should be from rgba(255,255,255,1) to rgba(255,255,255,0)

– Alon Eitan
Jan 2 at 19:02

@AlonEitan, I would but the idea is that I'm using this to change text, this is the plugin url gopiplus.com/work/2011/04/22/…

– Joey Arnanzo
Jan 2 at 19:06

@Diodeus-JamesMacFarlane: it can be, if you accept that any colour with an opacity of 0 is 'transparent.' It's not supported in all browsers, but there is an rgba syntax using hex, for example transparent white: #fff0 (or, long form: #ffffff00). (Simple demo: jsfiddle.net/quf36ynr).

– David Thomas
Jan 2 at 19:06

|
show 2 more comments

here is the JS

var FadeIn_FadeInterval;



window.onload = FadeIn_FadeRotate



var FadeIn_Links;

var FadeIn_Titles;

var FadeIn_Cursor = 0;

var FadeIn_Max;





function FadeIn_FadeRotate() 

{

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

  FadeIn_Links = new Array();

  FadeIn_Titles = new Array();

  FadeIn_SetFadeLinks();

  FadeIn_Max = FadeIn_Links.length-1;

  FadeIn_SetFadeLink();

}



function FadeIn_SetFadeLink() {

  var ilink = document.getElementById("FadeIn_Link");

  ilink.innerHTML = FadeIn_Titles[FadeIn_Cursor];

  ilink.href = FadeIn_Links[FadeIn_Cursor];

}



function FadeIn_Ontimer() {

  if (FadeIn_bFadeOutt) {

    FadeIn_Fade+=FadeIn_FadeStep;

    if (FadeIn_Fade>FadeIn_FadeOut) {

      FadeIn_Cursor++;

      if (FadeIn_Cursor>FadeIn_Max)

        FadeIn_Cursor=0;

      FadeIn_SetFadeLink();

      FadeIn_bFadeOutt = false;

    }

  } else {

    FadeIn_Fade-=FadeIn_FadeStep;

    if (FadeIn_Fade<FadeIn_FadeIn) {

      clearInterval(FadeIn_FadeInterval);

      setTimeout(Faderesume, FadeIn_FadeWait);

      FadeIn_bFadeOutt=true;

    }

  }

  var ilink = document.getElementById("FadeIn_Link");

  if ((FadeIn_Fade<FadeIn_FadeOut)&&(FadeIn_Fade>FadeIn_FadeIn))

    ilink.style.color = "#" + ToHex(FadeIn_Fade);

}



function Faderesume() {

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

}



function ToHex(strValue) {

  try {

    var result= (parseInt(strValue).toString(16));



    while (result.length !=2)

            result= ("0" +result);

    result = result + result + result;

    //alert(result);

    return result.toUpperCase();

  }

  catch(e)

  {

  }

}

and this is the php code for it

and the codes are as follows

Fade out : 255
Fade in: 0
fade: 0

I've tried to change the numbers but it stops working

asked Jan 2 at 18:55

Joey Arnanzo

2712

1

Can you post a working example with HTML or what you did so far?

– Armel
Jan 2 at 18:59

Transparent isn't a hex color.

– Diodeus - James MacFarlane
Jan 2 at 19:01

1

Google for transition css and you can implement if for the color attribute - It should be from rgba(255,255,255,1) to rgba(255,255,255,0)

– Alon Eitan
Jan 2 at 19:02

@AlonEitan, I would but the idea is that I'm using this to change text, this is the plugin url gopiplus.com/work/2011/04/22/…

– Joey Arnanzo
Jan 2 at 19:06

@Diodeus-JamesMacFarlane: it can be, if you accept that any colour with an opacity of 0 is 'transparent.' It's not supported in all browsers, but there is an rgba syntax using hex, for example transparent white: #fff0 (or, long form: #ffffff00). (Simple demo: jsfiddle.net/quf36ynr).

– David Thomas
Jan 2 at 19:06

|
show 2 more comments

here is the JS

var FadeIn_FadeInterval;



window.onload = FadeIn_FadeRotate



var FadeIn_Links;

var FadeIn_Titles;

var FadeIn_Cursor = 0;

var FadeIn_Max;





function FadeIn_FadeRotate() 

{

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

  FadeIn_Links = new Array();

  FadeIn_Titles = new Array();

  FadeIn_SetFadeLinks();

  FadeIn_Max = FadeIn_Links.length-1;

  FadeIn_SetFadeLink();

}



function FadeIn_SetFadeLink() {

  var ilink = document.getElementById("FadeIn_Link");

  ilink.innerHTML = FadeIn_Titles[FadeIn_Cursor];

  ilink.href = FadeIn_Links[FadeIn_Cursor];

}



function FadeIn_Ontimer() {

  if (FadeIn_bFadeOutt) {

    FadeIn_Fade+=FadeIn_FadeStep;

    if (FadeIn_Fade>FadeIn_FadeOut) {

      FadeIn_Cursor++;

      if (FadeIn_Cursor>FadeIn_Max)

        FadeIn_Cursor=0;

      FadeIn_SetFadeLink();

      FadeIn_bFadeOutt = false;

    }

  } else {

    FadeIn_Fade-=FadeIn_FadeStep;

    if (FadeIn_Fade<FadeIn_FadeIn) {

      clearInterval(FadeIn_FadeInterval);

      setTimeout(Faderesume, FadeIn_FadeWait);

      FadeIn_bFadeOutt=true;

    }

  }

  var ilink = document.getElementById("FadeIn_Link");

  if ((FadeIn_Fade<FadeIn_FadeOut)&&(FadeIn_Fade>FadeIn_FadeIn))

    ilink.style.color = "#" + ToHex(FadeIn_Fade);

}



function Faderesume() {

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

}



function ToHex(strValue) {

  try {

    var result= (parseInt(strValue).toString(16));



    while (result.length !=2)

            result= ("0" +result);

    result = result + result + result;

    //alert(result);

    return result.toUpperCase();

  }

  catch(e)

  {

  }

}

and this is the php code for it

and the codes are as follows

Fade out : 255
Fade in: 0
fade: 0

I've tried to change the numbers but it stops working

asked Jan 2 at 18:55

Joey Arnanzo

2712

here is the JS

var FadeIn_FadeInterval;



window.onload = FadeIn_FadeRotate



var FadeIn_Links;

var FadeIn_Titles;

var FadeIn_Cursor = 0;

var FadeIn_Max;





function FadeIn_FadeRotate() 

{

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

  FadeIn_Links = new Array();

  FadeIn_Titles = new Array();

  FadeIn_SetFadeLinks();

  FadeIn_Max = FadeIn_Links.length-1;

  FadeIn_SetFadeLink();

}



function FadeIn_SetFadeLink() {

  var ilink = document.getElementById("FadeIn_Link");

  ilink.innerHTML = FadeIn_Titles[FadeIn_Cursor];

  ilink.href = FadeIn_Links[FadeIn_Cursor];

}



function FadeIn_Ontimer() {

  if (FadeIn_bFadeOutt) {

    FadeIn_Fade+=FadeIn_FadeStep;

    if (FadeIn_Fade>FadeIn_FadeOut) {

      FadeIn_Cursor++;

      if (FadeIn_Cursor>FadeIn_Max)

        FadeIn_Cursor=0;

      FadeIn_SetFadeLink();

      FadeIn_bFadeOutt = false;

    }

  } else {

    FadeIn_Fade-=FadeIn_FadeStep;

    if (FadeIn_Fade<FadeIn_FadeIn) {

      clearInterval(FadeIn_FadeInterval);

      setTimeout(Faderesume, FadeIn_FadeWait);

      FadeIn_bFadeOutt=true;

    }

  }

  var ilink = document.getElementById("FadeIn_Link");

  if ((FadeIn_Fade<FadeIn_FadeOut)&&(FadeIn_Fade>FadeIn_FadeIn))

    ilink.style.color = "#" + ToHex(FadeIn_Fade);

}



function Faderesume() {

  FadeIn_FadeInterval = setInterval(FadeIn_Ontimer, 10);

}



function ToHex(strValue) {

  try {

    var result= (parseInt(strValue).toString(16));



    while (result.length !=2)

            result= ("0" +result);

    result = result + result + result;

    //alert(result);

    return result.toUpperCase();

  }

  catch(e)

  {

  }

}

and this is the php code for it

and the codes are as follows

Fade out : 255
Fade in: 0
fade: 0

I've tried to change the numbers but it stops working

javascript html css

asked Jan 2 at 18:55

Joey Arnanzo

2712

asked Jan 2 at 18:55

Joey Arnanzo

2712

asked Jan 2 at 18:55

Joey Arnanzo

2712

asked Jan 2 at 18:55

Joey Arnanzo

2712

asked Jan 2 at 18:55

Joey Arnanzo

2712

1

Can you post a working example with HTML or what you did so far?

– Armel
Jan 2 at 18:59

Transparent isn't a hex color.

– Diodeus - James MacFarlane
Jan 2 at 19:01

1

Google for transition css and you can implement if for the color attribute - It should be from rgba(255,255,255,1) to rgba(255,255,255,0)

– Alon Eitan
Jan 2 at 19:02

@AlonEitan, I would but the idea is that I'm using this to change text, this is the plugin url gopiplus.com/work/2011/04/22/…

– Joey Arnanzo
Jan 2 at 19:06

@Diodeus-JamesMacFarlane: it can be, if you accept that any colour with an opacity of 0 is 'transparent.' It's not supported in all browsers, but there is an rgba syntax using hex, for example transparent white: #fff0 (or, long form: #ffffff00). (Simple demo: jsfiddle.net/quf36ynr).

– David Thomas
Jan 2 at 19:06

|
show 2 more comments

1

Can you post a working example with HTML or what you did so far?

– Armel
Jan 2 at 18:59

Transparent isn't a hex color.

– Diodeus - James MacFarlane
Jan 2 at 19:01

1

Google for transition css and you can implement if for the color attribute - It should be from rgba(255,255,255,1) to rgba(255,255,255,0)

– Alon Eitan
Jan 2 at 19:02

@AlonEitan, I would but the idea is that I'm using this to change text, this is the plugin url gopiplus.com/work/2011/04/22/…

– Joey Arnanzo
Jan 2 at 19:06

@Diodeus-JamesMacFarlane: it can be, if you accept that any colour with an opacity of 0 is 'transparent.' It's not supported in all browsers, but there is an rgba syntax using hex, for example transparent white: #fff0 (or, long form: #ffffff00). (Simple demo: jsfiddle.net/quf36ynr).

– David Thomas
Jan 2 at 19:06

Can you post a working example with HTML or what you did so far?

– Armel
Jan 2 at 18:59

Transparent isn't a hex color.

– Diodeus - James MacFarlane
Jan 2 at 19:01

Google for transition css and you can implement if for the color attribute - It should be from rgba(255,255,255,1) to rgba(255,255,255,0)

– Alon Eitan
Jan 2 at 19:02

@AlonEitan, I would but the idea is that I'm using this to change text, this is the plugin url gopiplus.com/work/2011/04/22/…

– Joey Arnanzo
Jan 2 at 19:06

@Diodeus-JamesMacFarlane: it can be, if you accept that any colour with an opacity of 0 is 'transparent.' It's not supported in all browsers, but there is an rgba syntax using hex, for example transparent white: #fff0 (or, long form: #ffffff00). (Simple demo: jsfiddle.net/quf36ynr).

– David Thomas
Jan 2 at 19:06

|
show 2 more comments

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011707%2ffade-in-fade-out-effect-for-text-javascript%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu