Animating Text In Javascript

Question

So my problem is that I want to animate text (opacity) in js after you press enter, but I don't know how to do it with my code that I wrote. I can't explain why I can't animate but I can show ALL my code and you'll understand.

function handle(e){
        if(e.keyCode === 13){
            e.preventDefault();
            theaction();
        }
    }
    function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

function titleCase(str) {
     str = str.toLowerCase().split(' ');

     for(var i = 0; i < str.length; i++){
          str[i] = str[i].split('');
          str[i][0] = str[i][0].toUpperCase();
          str[i] = str[i].join('');
     }
     return str.join(' ');
}
function theaction() {
	var int = document.getElementById("every").value;
	var inp = int.toUpperCase();
	var lop;
	var dom = [".AERO",".BIZ",".CAT",".COM",".COOP",".EDU",".GOV",".INFO",".INT",".JOBS",".MIL",".MOBI",".MUSEUM",
".NAME",".NET",".ORG",".TRAVEL",".AC",".AD",".AE",".AF",".AG",".AI",".AL",".AM",".AN",".AO",".AQ",".AR",".AS",".AT",".AU",".AW",
".AZ",".BA",".BB",".BD",".BE",".BF",".BG",".BH",".BI",".BJ",".BM",".BN",".BO",".BR",".BS",".BT",".BV",".BW",".BY",".BZ",".CA",
".CC",".CD",".CF",".CG",".CH",".CI",".CK",".CL",".CM",".CN",".CO",".CR",".CS",".CU",".CV",".CX",".CY",".CZ",".DE",".DJ",".DK",".DM",
".DO",".DZ",".EC",".EE",".EG",".EH",".ER",".ES",".ET",".EU",".FI",".FJ",".FK",".FM",".FO",".FR",".GA",".GB",".GD",".GE",".GF",".GG",".GH",
".GI",".GL",".GM",".GN",".GP",".GQ",".GR",".GS",".GT",".GU",".GW",".GY",".HK",".HM",".HN",".HR",".HT",".HU",".ID",".IE",".IL",".IM",
".IN",".IO",".IQ",".IR",".IS",".IT",".JE",".JM",".JO",".JP",".KE",".KG",".KH",".KI",".KM",".KN",".KP",".KR",".KW",".KY",".KZ",".LA",".LB",
".LC",".LI",".LK",".LR",".LS",".LT",".LU",".LV",".LY",".MA",".MC",".MD",".MG",".MH",".MK",".ML",".MM",".MN",".MO",".MP",".MQ",
".MR",".MS",".MT",".MU",".MV",".MW",".MX",".MY",".MZ",".NA",".NC",".NE",".NF",".NG",".NI",".NL",".NO",".NP",".NR",".NU",
".NZ",".OM",".PA",".PE",".PF",".PG",".PH",".PK",".PL",".PM",".PN",".PR",".PS",".PT",".PW",".PY",".QA",".RE",".RO",".RU",".RW",
".SA",".SB",".SC",".SD",".SE",".SG",".SH",".SI",".SJ",".SK",".SL",".SM",".SN",".SO",".SR",".ST",".SU",".SV",".SY",".SZ",".TC",".TD",".TF",
".TG",".TH",".TJ",".TK",".TM",".TN",".TO",".TP",".TR",".TT",".TV",".TW",".TZ",".UA",".UG",".UK",".UM",".US",".UY",".UZ", ".VA",".VC",
".VE",".VG",".VI",".VN",".VU",".WF",".WS",".YE",".YT",".YU",".ZA",".ZM",".ZR",".ZW"];

	if (dom.some(function(v) { return inp.indexOf(v) >= 0; })) {

    if (inp.includes("HTTP://") || inp.includes("HTTPS://")) {
    	window.location.href = inp.toLowerCase();
    }
    else {
    	var ht = "http://";
    	var loplink = ht.concat(inp);
    	window.location.href = loplink;
    }

}
else if (inp.includes("GOOGLE:")) {
var googlesearch = inp.substr(7);
window.location.href = "https://www.google.fi/search?q=" + googlesearch.toLowerCase();
}
else if (inp.includes("DDG:")) {
	var ddgsearch = inp.substr(4);
	window.location.href = "https://duckduckgo.com/?q=" + ddgsearch.toLowerCase();
}
else if (inp.includes("QWANT:")) {
	var qwantsearch = inp.substr(6);
	window.location.href = "https://www.qwant.com/?l=en&h=1&hc=1&a=1&s=0&b=1&i=1&r=en&sr=en&q=" + qwantsearch.toLowerCase();
}
else if (inp.includes("HSL:")) {
	var hslsearch = inp.substr(4);
	window.location.href = "https://m.reittiopas.fi/en/index.php?mod=ls&txtSearch=" + hslsearch.toLowerCase() + "&search=Search";
}
else if (inp.includes("MY NAME IS")) {
	var nameis = inp.split("IS ")[1];
	var namelow = nameis.toLowerCase();
	var namefcap = titleCase(namelow);
	var namefinal = namefcap.split(' ').filter(function(v){return v!==' '});
if (namefinal.length < 3) {
	lop = "Hello " + namefinal + "! My name is DAT BOIYIIYIYIYIYI!";
	lop = lop.replace(",", " ");
	document.getElementById("output").innerHTML = lop;
    }
else {
	lop = "You have a beutiful name!";
	document.getElementById("output").innerHTML = lop;
	sleep(5000);
	window.location.href = "http://www.zombo.com";
}	
	
}
else if (inp.includes("BG:")) {
	var bgGoodness = inp.substr(3);
	document.getElementById("theBodyOfAModel").style.backgroundColor = bgGoodness;
}
    
else {

	switch(inp){

	case 'HEY':
	case 'HEY!':
	case 'HI!':
	case 'HI':
	case 'HELLO':
	case 'HELLO!':

		lop = "Hey!";
		break;

	case 'HEY SIRI!':
	case 'HEY SIRI':
	case 'HI SIRI':
	case 'HI SIRI!':
	case 'HELLO SIRI':
	case 'HELLO SIRI!':

		lop = "I'm not Siri! I'm dat BOiiii!";
		break;

	case 'FOO':

		lop = "Bar";
		break;

	case 'BAR':

		lop = "Foo";
		break;

	case 'FOOBAR':
	case 'FOO BAR':

		lop = 'Searching for bars called "Foo".....';
		break;

	case 'WHAT TIME IS IT?':
	case 'WHAT TIME IS IT':
	case 'WHAT IS THE TIME?':
	case 'WHAT IS THE TIME?':

		lop = "DEMO: " + Date();

		break;

	default:

		lop = "U WOT M8??";
		break;
	}

	document.getElementById("output").innerHTML = lop;
}
}
function stylejs() {
	document.getElementById("every").style.width = "600px";
	document.getElementById("every").style.borderColor = "blue";
	document.getElementById("every").style.cursor = "auto";
}

body {
	padding: 0;
	background-color: #ecf0f1;
}
#every {
	font-size: 25px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: 0px;
	margin-bottom: 0px:;
	width: 300px;
	/*340px*/
	height: 30px;
	/*70px*/
	margin-left: -173.4px;
	margin-top: -38.08px;
	padding: 20px;
	vertical-align: middle;
	font-family: 'Open Sans', sans-serif;
	border: 1px solid #000;
	border-radius: 5px;
	background-color: #fff;
	color: #000;
	-webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#every:hover {
	border-color: #2980b9;
	background-color: #fff;
	color: #000;
}
#every:focus {
    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#every:not(:focus) {
	cursor: pointer;
}
#output {
	padding: 0px;
	font-size: 28px;
	font-family: 'Open Sans', sans-serif;
	margin: 0px;
	text-align: center;
	-webkit-user-select: none;
 	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#outwrapper {
	height: 120px;
	width: 500px;
	position: absolute;
	top: 55%;
	left: 50%;
	padding: 0px;
	margin-left: -250px;
	margin-top: 0px;
	margin-bottom: 0px:
	margin-right: 0px;
	text-align: center;
}

<body id="theBodyOfAModel">
<form onkeypress="handle(event)" action="#">
<input onclick="stylejs();" autocomplete="off" placeholder="Type Something..." type="text" id="every"/>
</form>
<div id="outwrapper">
<p id="output"></p>
</div>

http://jsbin.com/sevesujubo/edit?html,js,output

Im sorry about the weird ID and function names. And no jquery plz, even if it would make it easier.

P.S Even if you can't help me, it would be nice if you could improve my code. Thanks (:

When you type something in the <input> and it then outputs something. So the output. — drstuggels
– drstuggels, Commented Feb 19, 2017 at 14:08

Bourbia Brahim · Accepted Answer · 2017-02-19 15:15:50Z

If I've understand ,To set a an opacity animation on the rendered text you'll : set transition property to the output paragraph (already set in your css) and add the below code in your handle function ;

function handle(e){
  if(e.keyCode === 13){
    e.preventDefault();

    //---- added code
    document.getElementById("output").style.opacity = 0;
    setTimeout(function(){
      theaction();
      document.getElementById("output").style.opacity = 1;
    },500);
    //----
  }
}

so first set opacity to 0 after wait 500 millisconds then execute theaction(); and set the opacity again to 1 ( css transition will make the annimation )

below working Fiddle :

function handle(e){
  if(e.keyCode === 13){
    e.preventDefault();
    document.getElementById("output").style.opacity = 0;
    setTimeout(function(){
      theaction();
      document.getElementById("output").style.opacity = 1;
      //alert("yo")
    },500);
  }
}
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

function titleCase(str) {
   str = str.toLowerCase().split(' ');

   for(var i = 0; i < str.length; i++){
        str[i] = str[i].split('');
        str[i][0] = str[i][0].toUpperCase();
        str[i] = str[i].join('');
   }
   return str.join(' ');
}

function theaction() {
	var int = document.getElementById("every").value;
	var inp = int.toUpperCase();
	var lop;
	var dom = [".AERO",".BIZ",".CAT",".COM",".COOP",".EDU",".GOV",".INFO",".INT",".JOBS",".MIL",".MOBI",".MUSEUM",
".NAME",".NET",".ORG",".TRAVEL",".AC",".AD",".AE",".AF",".AG",".AI",".AL",".AM",".AN",".AO",".AQ",".AR",".AS",".AT",".AU",".AW",
".AZ",".BA",".BB",".BD",".BE",".BF",".BG",".BH",".BI",".BJ",".BM",".BN",".BO",".BR",".BS",".BT",".BV",".BW",".BY",".BZ",".CA",
".CC",".CD",".CF",".CG",".CH",".CI",".CK",".CL",".CM",".CN",".CO",".CR",".CS",".CU",".CV",".CX",".CY",".CZ",".DE",".DJ",".DK",".DM",
".DO",".DZ",".EC",".EE",".EG",".EH",".ER",".ES",".ET",".EU",".FI",".FJ",".FK",".FM",".FO",".FR",".GA",".GB",".GD",".GE",".GF",".GG",".GH",
".GI",".GL",".GM",".GN",".GP",".GQ",".GR",".GS",".GT",".GU",".GW",".GY",".HK",".HM",".HN",".HR",".HT",".HU",".ID",".IE",".IL",".IM",
".IN",".IO",".IQ",".IR",".IS",".IT",".JE",".JM",".JO",".JP",".KE",".KG",".KH",".KI",".KM",".KN",".KP",".KR",".KW",".KY",".KZ",".LA",".LB",
".LC",".LI",".LK",".LR",".LS",".LT",".LU",".LV",".LY",".MA",".MC",".MD",".MG",".MH",".MK",".ML",".MM",".MN",".MO",".MP",".MQ",
".MR",".MS",".MT",".MU",".MV",".MW",".MX",".MY",".MZ",".NA",".NC",".NE",".NF",".NG",".NI",".NL",".NO",".NP",".NR",".NU",
".NZ",".OM",".PA",".PE",".PF",".PG",".PH",".PK",".PL",".PM",".PN",".PR",".PS",".PT",".PW",".PY",".QA",".RE",".RO",".RU",".RW",
".SA",".SB",".SC",".SD",".SE",".SG",".SH",".SI",".SJ",".SK",".SL",".SM",".SN",".SO",".SR",".ST",".SU",".SV",".SY",".SZ",".TC",".TD",".TF",
".TG",".TH",".TJ",".TK",".TM",".TN",".TO",".TP",".TR",".TT",".TV",".TW",".TZ",".UA",".UG",".UK",".UM",".US",".UY",".UZ", ".VA",".VC",
".VE",".VG",".VI",".VN",".VU",".WF",".WS",".YE",".YT",".YU",".ZA",".ZM",".ZR",".ZW"];

	if (dom.some(function(v) { return inp.indexOf(v) >= 0; })) {

    if (inp.includes("HTTP://") || inp.includes("HTTPS://")) {
    	window.location.href = inp.toLowerCase();
    }
    else {
    	var ht = "http://";
    	var loplink = ht.concat(inp);
    	window.location.href = loplink;
    }

}
else if (inp.includes("GOOGLE:")) {
var googlesearch = inp.substr(7);
window.location.href = "https://www.google.fi/search?q=" + googlesearch.toLowerCase();
}
else if (inp.includes("DDG:")) {
	var ddgsearch = inp.substr(4);
	window.location.href = "https://duckduckgo.com/?q=" + ddgsearch.toLowerCase();
}
else if (inp.includes("QWANT:")) {
	var qwantsearch = inp.substr(6);
	window.location.href = "https://www.qwant.com/?l=en&h=1&hc=1&a=1&s=0&b=1&i=1&r=en&sr=en&q=" + qwantsearch.toLowerCase();
}
else if (inp.includes("HSL:")) {
	var hslsearch = inp.substr(4);
	window.location.href = "https://m.reittiopas.fi/en/index.php?mod=ls&txtSearch=" + hslsearch.toLowerCase() + "&search=Search";
}
else if (inp.includes("MY NAME IS")) {
	var nameis = inp.split("IS ")[1];
	var namelow = nameis.toLowerCase();
	var namefcap = titleCase(namelow);
	var namefinal = namefcap.split(' ').filter(function(v){return v!==' '});
if (namefinal.length < 3) {
	lop = "Hello " + namefinal + "! My name is DAT BOIYIIYIYIYIYI!";
	lop = lop.replace(",", " ");
	document.getElementById("output").innerHTML = lop;
    }
else {
	lop = "You have a beutiful name!";
	document.getElementById("output").innerHTML = lop;
	sleep(5000);
	window.location.href = "http://www.zombo.com";
}	
	
}
else if (inp.includes("BG:")) {
	var bgGoodness = inp.substr(3);
	document.getElementById("theBodyOfAModel").style.backgroundColor = bgGoodness;
}
    
else {

	switch(inp){

	case 'HEY':
	case 'HEY!':
	case 'HI!':
	case 'HI':
	case 'HELLO':
	case 'HELLO!':

		lop = "Hey!";
		break;

	case 'HEY SIRI!':
	case 'HEY SIRI':
	case 'HI SIRI':
	case 'HI SIRI!':
	case 'HELLO SIRI':
	case 'HELLO SIRI!':

		lop = "I'm not Siri! I'm dat BOiiii!";
		break;

	case 'FOO':

		lop = "Bar";
		break;

	case 'BAR':

		lop = "Foo";
		break;

	case 'FOOBAR':
	case 'FOO BAR':

		lop = 'Searching for bars called "Foo".....';
		break;

	case 'WHAT TIME IS IT?':
	case 'WHAT TIME IS IT':
	case 'WHAT IS THE TIME?':
	case 'WHAT IS THE TIME?':

		lop = "DEMO: " + Date();

		break;

	default:

		lop = "U WOT M8??";
		break;
	}

	document.getElementById("output").innerHTML = lop;
}
}
function stylejs() {
	document.getElementById("every").style.width = "600px";
	document.getElementById("every").style.borderColor = "blue";
	document.getElementById("every").style.cursor = "auto";
}

body {
	padding: 0;
	background-color: #ecf0f1;
}
#every {
	font-size: 25px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: 0px;
	margin-bottom: 0px:;
	width: 300px;
	/*340px*/
	height: 30px;
	/*70px*/
	margin-left: -173.4px;
	margin-top: -38.08px;
	padding: 20px;
	vertical-align: middle;
	font-family: 'Open Sans', sans-serif;
	border: 1px solid #000;
	border-radius: 5px;
	background-color: #fff;
	color: #000;
	-webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#every:hover {
	border-color: #2980b9;
	background-color: #fff;
	color: #000;
}
#every:focus {
    -webkit-transition: width 0.4s ease-in-out;
    -moz-transition: width 0.4s ease-in-out;
    -o-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#every:not(:focus) {
	cursor: pointer;
}
#output {
	padding: 0px;
	font-size: 28px;
	font-family: 'Open Sans', sans-serif;
	margin: 0px;
	text-align: center;
	-webkit-user-select: none;
 	-moz-user-select: none;
  	-ms-user-select: none;
  	user-select: none;
  	-webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#outwrapper {
	height: 120px;
	width: 500px;
	position: absolute;
	top: 55%;
	left: 50%;
	padding: 0px;
	margin-left: -250px;
	margin-top: 0px;
	margin-bottom: 0px:
	margin-right: 0px;
	text-align: center;
}

<body id="theBodyOfAModel">
<form onkeypress="handle(event)" action="#">
<input onclick="stylejs();" autocomplete="off" placeholder="Type Something..." type="text" id="every"/>
</form>
<div id="outwrapper">
<p id="output"></p>
</div>

Collectives™ on Stack Overflow

Animating Text In Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related