Animar imagen con jquery simulando un gif
Publicado por george (3 intervenciones) el 26/01/2018 02:33:27
El rollo es animar una imagen asignando una imagen de una lista, son 4 imagenes y la imagen a cambiar, se usa javascript y jquery. Es como hacer un gif; el problema es que no funciona la animacion, no cambia la imagen. Pero si agrego una interrupcion en el codigo como "alert()" si muestra el cambio de imagen. No se donde esta el error.
El codigo javascript:
Pagina web:
El codigo javascript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
animagato(21);
});
function animagato(n){
var i=0; var j=0;for(i=0;i<n;i++){
$("#colaanima").attr("src", "cola"+j+".jpg").fadeIn(1500).show();
j++;
if(j>=4)j=0;
alert(j);
}}Pagina web:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
#gatillo { float:left; width:200px; height:221px; z-index:0; position:relative;}
.gato {z-index=0; position: absolute;}
</style>
<script src="jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="anima.js" type="text/javascript"></script>
</head>
<body>
<div id="gatillo">
<img id="colaanima" src="cola0.jpg" alt="" />
</div>
<div id="igato0" class="gato" hidden="true"><img id="gato0" src="cola0.jpg" alt="" /></div>
<div id="igato1" class="gato" hidden="true"><img id="gato1" src="cola1.jpg" alt="" /></div>
<div id="igato2" class="gato" hidden="true"><img id="gato2" src="cola2.jpg" alt="" /></div>
<div id="igato3" class="gato" hidden="true"><img id="gato3" src="cola3.jpg" alt="" /></div>
</body>
</html>
Valora esta pregunta
0
