¡Muy buenas a todos!
Soy un iniciado en el mundo del Javascript y conseguí hacer un efecto de presentación que funcionaba perfectamente en todos los exploradores... excepto en Chrome y también Safari.
Las 3 primeras imágenes se ven en todos correctamente, pero en Chrome a veces, la imagen n4 no desaparece...
Si pulso actualizar en el icono, no funciona. Pero si actualizo pulsando Intro en las letras, Sí que funciona, y no lo entiendo la verdad. Se supone que las 2 maneras de actualizar hacen lo mismo, verdad? Pero parece ser que no.
¿Alguien podría hecharme una mano para que funcione?
Muchas gracias.
He aquí mi código: (Podeis copiar y pegar)
<html>
<head>
<title>Java que no va</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css" >
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var tiempo_inicio_anim = 0;
var tiempo_entre_img = 1700;
var tiempo_fade = 2000;
function animacion_simple() {
// Mostramos la foto 1
$(".foto1").fadeOut(1000);
$(".foto2").fadeOut(1000);
$(".foto3").fadeOut(1000);
$(".logoindex").fadeOut(1000);
// mostramos la foto 1
setTimeout(function() {
$(".foto1").fadeIn(tiempo_fade);
}, tiempo_entre_img);
// mostramos la foto 2
setTimeout(function() {
$(".foto3").fadeIn(tiempo_fade);
}, tiempo_entre_img*2);
// mostramos la 3era
setTimeout(function() {
$(".foto2").fadeIn(tiempo_fade);
}, tiempo_entre_img*3);
setTimeout(function() {
// mostramos el texto
$(".logoindex").fadeIn(tiempo_fade);
}, tiempo_entre_img*4);
}
setTimeout(function() {
animacion_simple();
}, tiempo_inicio_anim);
});
</script>
</head>
<body >
<div id="Main">
<div id="Head">
</div>
<div id="contenidoindex">
<div class="wrapper">
<div id="Portada">
<div class="animacion_img">
<div class="Portada1">
<a href=""><img style="width: 400px; height: 300px; border:none;" class="foto1" alt="foto1" src="http://4.bp.blogspot.com/_N9IgQ7NPphg/TKOeYRHCy8I/AAAAAAAAAEo/i-KgrBiqRwM/s1600/oceano.jpg"></a>
</div>
<div class="Portada2">
<a href=""><img style="width: 400px; height: 300px; border:none;" class="foto2" alt="J2" src="http://4.bp.blogspot.com/_N9IgQ7NPphg/TKOeYRHCy8I/AAAAAAAAAEo/i-KgrBiqRwM/s1600/oceano.jpg"></a>
</div>
<div class="Portada3">
<a href=""><img style="width: 400px; height: 300px; border:none;" class="foto3" alt="J3" src="http://4.bp.blogspot.com/_N9IgQ7NPphg/TKOeYRHCy8I/AAAAAAAAAEo/i-KgrBiqRwM/s1600/oceano.jpg"></a>
</div>
</div>
</div>
<img class="logoindex" src="http://4.bp.blogspot.com/_N9IgQ7NPphg/TKOeYRHCy8I/AAAAAAAAAEo/i-KgrBiqRwM/s1600/oceano.jpg">
</div>
</div>
<div id="Pie">
<p></p>
</div>
</div>
</body>
</html>