What is a promise in Javascript?

Question

lromeraj

Asked: 2020-09-11 10:26:46 +0800 CST 2020-09-11 10:26:46 +0800 CST 2020-09-11 10:26:46 +0800 CST

I want to FadeIn two elements using jQuery

772

What I want to do is a FadeInwith jQuerybut I can't:

My JS:

function fadein() {

     $("#result").fadeIn(1000);
     $("#svgresult").fadeIn(1000);

    }

<button id="calculate" type="button" onclick="fadein();">Calculate</button>

<svg id="svgresult" style="display: none; position:fixed; bottom: 0px; height: 220px; background:#0092ED; width: 100%;"></svg>
<h1 id="result" style="display: none">Result</h1>

And what I want to do, is that when you press "Calculate" do a FadeIn of the text "Result" and its background.

Update September 12, 2016

	<script>
	
	
	$('#calculate').click(function() {
  $('#svgresult, #result').fadeIn();
});
	
			function calculate() {
		
		
			//Mostrar el texto resultado más el fondo del texto
			//document.getElementById("result").style.visibility = "visible";
			//document.getElementById("svgresult").style.visibility = "visible";
			document.getElementById("operatortext").style.visibility = "hidden";
	
			//Varibles de la operación
			var v1 = document.getElementById("value1").value;
			var o = document.getElementById("operator").value;
			var v2 = document.getElementById("value2").value;
	
	
			//Advierte de que el operando introducido no es válido
			if (o =="") alert("Please insert an operator!");
	
			//Si no se ha introducido ningún valor, sustituirlo por 0
			if (v1 =="") v1 = document.getElementById("value1").value = "0";
			if (v2 =="") v2 = document.getElementById("value2").value = "0";

			//Generar un número aleatorio
			if (o =="?" || o =="¿")  var H = Math.random();
						  var X = ((H * 100) / 4);
                          var text = "" + X + "";
                          document.forms.form1.area.value = text
			
			//Suma
			if (o =="+") var resultsum = Number(v1) + Number(v2);
			if (o =="+") var text = ("" + resultsum + "");
	                     document.forms.form1.area.value = text;
	
			//Resta
			if (o =="-") var resultrest = Number(v1) - Number(v2);
			if (o =="-") var text = ("" + resultrest + "");
				         document.forms.form1.area.value = text;
				 
			//Multiplicación
			if (o =="*" || o =="·" || o =="x" || o =="X") var resultmult = Number(v1) * Number(v2);
			if (o =="*" || o =="·" || o =="x" || o =="X") var text = ("" + resultmult + "");
	                                                      document.forms.form1.area.value = text;
				 
			//División
			if (o =="/" || o ==":") var resultdiv = Number(v1) / Number(v2);
			if (o =="/" || o ==":") var text = ("" + resultdiv + "");
	                                document.forms.form1.area.value = text;
				 
			//Potencia
			if (o =="^" || o =="**" || o =="^^") var resultpower = Math.pow(v1, v2);
			if (o =="^" || o =="**" || o =="^^") var text = ("" + resultpower + "");
                                                 document.forms.form1.area.value = text;
				 
			//Si el resultado no es numérico mostrar un determinado mensaje			 
			if (isNaN(text)) var text = "Unable to calculate the result!";
				             document.forms.form1.area.value = text;
			
			//Si el resultado no es numérico, ocultar el texto resultado y la caja de fondo
			//if (isNaN(text)) document.getElementById("result").style.visibility = "hidden";
			//if (isNaN(text)) document.getElementById("svgresult").style.visibility = "hidden";
	}
	
	
		
		function calc() {
		
			window.location = "http://www.bananatestlol.weebly.com";
			
	}
	
	
	    function tips() {
		
			window.location = "http://www.bananatestlol.weebly.com/tips.html";
			
	}
		

</script>

#value1 {

	
	position: absolute;
	font-size: 300%;
	width: 250px;
	border: 0px solid white;
	border-radius: 15px;
	outline: none;
	color: #0092ED;
	text-align: center;
	background: #ffffff;
	left: 35%;
	transform: translate(-50%, 0%);
	top: 50%;
	margin-left: -60px;
	transition: all 0.3s;
	
}



#value1:hover {

	
	position: absolute;
	font-size: 300%;
	width: 280px;
	border: 0px solid white;
	border-radius: 15px;
	outline: none;
	color: #0092ED;
	text-align: center;
	background: #ffffff;
	left: 35%;
	transform: translate(-50%, 0%);
	top: 50%;
	margin-left: -90px;
	
}



#value1:focus {

	background: #0072B8;
	color: #ffffff;
	border: 0px solid #0072B8;
	width: 280px;
	margin-left: -90px;
	font-weight: bold;

}



#operatortext {

	color: #ffffff;
	position: absolute;
	left: 50%;
	top: 57%;
	transform: translate(-50%, 0%);


}


#operator {

	font-size: 300%;
	position: absolute;
	width: 50px;
	border: 0px solid white;
	border-radius: 15px;
	outline: none;
	font-weight: bold;
	color: #666666;
	text-align: center;
	background: #ffffff;
	left: 50%;
	transform: translate(-50%, 0%);
	top: 50%;
	transition: all 0.3s;
}


#operator:hover {

	font-size: 300%;
	position: absolute;
	width: 60px;
	border: 0px solid white;
	border-radius: 15px;
	outline: none;
	font-weight: bold;
	color: #666666;
	text-align: center;
	background: #ffffff;
	left: 50%;
	transform: translate(-50%, 0%);
	top: 50%;
}



#operator:focus {

	border: 0px solid #666666;
	color: #ffffff;
	background: #999999;
	width: 60px;

}


#value2 {

	font-size: 300%;
	position: absolute;
	width: 250px;
	border: 0px solid #ffffff;
	border-radius: 15px;
	outline: none;
	color: #0092ED;
	text-align: center;
	background: #ffffff;
	left: 65%;
	transform: translate(-50%, 0%);
	top: 50%;
	margin-left: 60px;
	transition: all 0.3s;
}


#value2:hover {

	font-size: 300%;
	position: absolute;
	width: 280px;
	border: 0px solid #ffffff;
	border-radius: 15px;
	outline: none;
	color: #0092ED;
	text-align: center;
	background: #ffffff;
	left: 65%;
	transform: translate(-50%, 0%);
	top: 50%;
	margin-left: 90px;
}



#value2:focus {

	background: #0072B8;
	color: #ffffff;
	border: 0px solid #0072B8;
	width: 280px;
	margin-left: 90px;
	font-weight: bold;

}




h1 {

	font-size: 250%;
	color: #ffffff;
	font-weight: bold;
	


}




#calculate {



	position: absolute;
	border: 2px solid #ffffff;
	font-size: 250%;
	background: #ffffff;
	color: #666666;
	border-radius: 25px;
	left: 50%;
	transform: translate(-50%, 0%);
	top: 30%;
	transition: all 0.3s;
	outline: none;
	padding: 15px 30px;

}

#calculate:hover {

	position: absolute;
	border: 2px solid #ffffff;
	color: #ffffff;
	background: transparent;
	border-radius: 25px;
	left: 50%;
	transform: translate(-50%, 0%);
	top: 30%;
	opacity: 0.5;
	outline: none;
	

}


textarea {

	position: fixed;
	bottom: 0px;
	
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	
	height: 150px;
	min-height: 150px;
	max-height: 150px;
	
	border: 0px solid #ffffff;
	background: #ffffff;
	
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 425%;
	color: #0092ED;
	outline: none;
	
	transition: all 0.3s;

}




textarea:hover {

	position: fixed;
	bottom: 0px;
	
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	
	height: 220px;
	min-height: 220px;
	max-height: 220px;
	
	border: 0px solid #0092ED;
	background: #0092ED;
	
	
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-align: center;
	font-size: 500%;
	color: #ffffff;
	outline: none;

}



#result {
	
	position: fixed;
	left: 50%;
	bottom: 140px;
	color: #ffffff;
	transform: translate(-50%, 0%);
}


#calculator {
	
	position: fixed;
	top: 0px;
	left: 0%;
	height: 80px;
	width: 50%;
	background: #ffffff;
	border-left: 0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	border-right: 0px solid #F3003D;
	border-top: 0px solid #ffffff;
	color: #F3003D;
	font-size: 150%;
	outline: none;
	transition: all 0.3s;

}


#calculator:hover {
	
	position: fixed;
	top: 0px;
	left: 0%;
	height: 80px;
	width: 50%;
	background: #F3003D;
	border-left: 0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	border-right: 0px solid #F3003D;
	border-top: 0px solid #ffffff;
	color: #ffffff;
	font-size: 250%;
	font-weight: bold;
	outline: none;

}



#calculator:focus {
	
	position: fixed;
	top: 0px;
	left: 0%;
	height: 80px;
	width: 50%;
	background: #F3003D;
	border-left: 0px solid #ffffff;
	border-bottom: 0px solid #ffffff;
	border-right: 0px solid #F3003D;
	border-top: 0px solid #ffffff;
	color: #ffffff;
	font-size: 250%;
	font-weight: bold;
	outline: none;

}


#tips {

	position: fixed;
	top: 0px;
	right: 0%;
	height: 80px;
	width: 50%;
	background: #ffffff;
	border-left: 0px solid #10E152;
	border-bottom: 0px solid #ffffff;
	border-right: 0px solid #ffffff;
	border-top: 0px solid #ffffff;
	color: #10E152;
	font-size: 150%;
	outline: none;
	transition: all 0.3s;

}

#tips:hover {

	position: fixed;
	top: 0px;
	right: 0%;
	height: 80px;
	width: 50%;
	background: #10E152;
	border-left: 0px solid #10E152;
	border-bottom: 0px solid #ffffff;
	border-right: 0px solid #ffffff;
	border-top: 0px solid #ffffff;
	color: #ffffff;
	font-size: 250%;
	font-weight: bold;
	outline: none;

}


#tips:focus {

	position: fixed;
	top: 0px;
	right: 0%;
	height: 80px;
	width: 50%;
	background: #10E152;
	border-left: 0px solid #10E152;
	border-bottom: 0px solid #ffffff;
	border-right: 0px solid #ffffff;
	border-top: 0px solid #ffffff;
	color: #ffffff;
	font-size: 250%;
	font-weight: bold;
	outline: none;

}








.demo-card-wide.mdl-card {
  
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 120px;
  width: 90%;
  border-radius: 20px;
  border: 0px solid #ffffff;
  margin-bottom: 50px;
}

.demo-card-wide > .mdl-card__title {

  color: #ffffff;
  height: 176px;
  background: url("https://www.weebly.com/editor/uploads/8/8/5/8/88581596/custom_themes/359885798850792406/files/images/Imagen79.jpg") center;
}
.demo-card-wide > .mdl-card__menu {
  color: #ffffff;
  
}

<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<meta name="theme-color" content="#ffffff" />


<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,300italic,500,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css" />
<script src="//storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js"></script>

</head>

<body style="background: url(https://www.weebly.com/editor/uploads/8/8/5/8/88581596/custom_themes/359885798850792406/files/images/Imagen791.jpg) 15% 30%;"  class='  wsite-theme-light'>
<!-- Valor de la operación 1 -->
<form action="#">
  <div class="center">
    <input class="center" type="number" id="value1">
    <label id="labelvalue1" class="mdl-textfield__label" for="value1"></label>
  </div>
</form>

<!-- Operador -->
<form action="#">
  <div class="center">
    <input class="center" type="text"  id="operator" maxlength="2">
    <label id ="labeloperator" class="mdl-textfield__label" for="operator"></label>
  </div>
</form>
<h2 id="operatortext" onclick="tips()">Operator</h2>


<!-- Valor de la operación 2 -->
<form action="#">
  <div class="center">
    <input class="center" type="number" id="value2">
    <label id="labelvalue2" class="mdl-textfield__label" for="value2"></label>
  </div>
</form>


<!-- Botón calcular --> 
<button id="calculate" type="button" onclick="calculate()">Calculate</button>

<!-- Texto resultado más el fondo del texto -->
<svg id="svgresult" style="display: none; position:fixed; bottom: 0px; height: 220px; background:#0092ED; width: 100%;"></svg>
<h1 id="result" style="display: none">Result</h1>


<!-- Resultado -->
<form name="form1">
	<textarea readonly="readonly" name="area" ?echo $descripcion;?>The result will be showed here</textarea>
</form>


<!-- Menú -->
<svg id="menubackbox" style="position:fixed; background: #ffffff; opacity: 1; width: 100%; height: 80px; top: 0%; "></svg>
<button id="calculator" onclick="setTimeout(calc, 100)">Calculator</button>
<button id="tips" onclick="setTimeout(tips, 100)">Info</button>  


<!--
class='wsite-theme-light'>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
<div style='display:none'>{content}</div>
<div style='padding: 20px; width:100%; text-align:center;'>{footer}</div>
-->

</body>
</html>

This is the whole code, I hope you can help me, thanks!

1 Answers

Voted

Shaz · Answer 1 · 2020-09-11T12:29:54+08:00

Best Answer

Shaz

2020-09-11T12:29:54+08:002020-09-11T12:29:54+08:00

Using .click() on the button and applying .fadeIn() on the two mentioned elements:

$('#calculate').click(function() {
  $('#svgresult, #result').fadeIn();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="calculate" type="button">Calculate</button>

<svg id="svgresult" style="display: none; position:fixed; bottom: 0px; height: 220px; background:#0092ED; width: 100%;"></svg>
<h1 id="result" style="display: none">Result</h1>

2

I want to FadeIn two elements using jQuery

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?