0

Lo que quiero hacer es un FadeIn con jQuery pero no lo consigo:

Mi 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>

Y lo que quiero hacer, es que cuando presionas "Calculate" hacer un FadeIn del texto "Result" y su fondo.

Actualización 12 Setiembre 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>

Este es el código entero, espero que puedas ayudarme., ¡gracias!

0

1 respuesta 1

2

Usando .click() en el botón y aplicando .fadeIn() en los dos elementos en mención:

$('#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>

8
  • Muchas gracias!!!
    – lromeraj
    el 10 sep. 2016 a las 20:34
  • Si te sirvió la respuesta podrías considerar aceptarla, haciendo clic en la "marca de chequeo" a la izquieda de la misma.
    – Shaz
    el 10 sep. 2016 a las 20:38
  • Añado el jQuery que me has dado dentro de la funcion o donde lo pongo?
    – lromeraj
    el 10 sep. 2016 a las 20:38
  • Reemplaza el código JavaScript que tenías por el que proporcioné.
    – Shaz
    el 10 sep. 2016 a las 20:39
  • No me funciona :(
    – lromeraj
    el 10 sep. 2016 a las 20:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.