What I want to do is a FadeIn with jQuery but I do not get it:
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 12 September 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. Thank you!