Metodo para colocar un "delay" entre instrucciones
Publicado por Alex (1 intervención) el 27/03/2020 04:24:21
Quisiera saber si existe algun método para ejecutar una funcion pasado cierto tiempo. Por ejemplo, en el codigo que esta mas abajo lo que yo queria hacer era crear un cuadro donde el degradado vaya cambiando de posicion. O sea, el azul que empieza en la derecha pasaria a la izquierda y el blanco que empieza en la izquierda terminaria en la derecha. Todo esto cambiando progresivamente en un intervalo de tiempo.
El codigo funciona (creo) pero no se como hacer para crear ese "tiempo".
Aca esta el código: Por cierto, utilizo JQuery para JavaScript. Ya probe el delay() y no me funciona y tambien probe el setTimeout() y no me funciona. Si creen que es con eso, porfavor escriban el codigo completo de JavaScript de como lo harian ustedes.
HTML
CSS
JAVASCRIPT
El codigo funciona (creo) pero no se como hacer para crear ese "tiempo".
Aca esta el código: Por cierto, utilizo JQuery para JavaScript. Ya probe el delay() y no me funciona y tambien probe el setTimeout() y no me funciona. Si creen que es con eso, porfavor escriban el codigo completo de JavaScript de como lo harian ustedes.
HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no"/>
<title> Colorines </title>
<link rel="stylesheet" type="text/css" href="estilos01.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="guion01.js" type="text/javascript"></script>
</head>
<body>
<div id="colores">
<h3> Texto Normal </h3>
</div>
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
*{
margin: 0px; padding: 0px;}body{background-color: cadetblue;
}#colores{ width: 400px; height: 400px; border: 3px solid black;border-radius: 5px;
background: linear-gradient(to left, rgb(0,0,255), rgb(255,255,255));
margin: 0px auto;margin-top: 300px;
}#colores h3{text-align: center;
line-height: 400px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: red;text-shadow: 0px 0px 5px yellow;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(document).ready(function(){
var rgb1 = [0,0,255]; // Blue
var rgb2 = [255,255,255]; // White
var bg;
for(var i=0;i<=255;i++){
rgb1[0] = i;
rgb1[1] = i;
rgb2[0] = 255 - i;
rgb2[1] = 255 - i;
bg= "linear-gradient(to left , rgb(" + rgb1[0] + "," + rgb1[1] + "," + rgb1[2] + ")," + "rgb(" + rgb2[0] + "," + rgb2[1] + "," + rgb2[2] + ")";
window.setTimeout(function(){
$("#colores").css("background",bg);
}, 20);
}});
Valora esta pregunta
0
