Problemas com animação do JQuery
Estou tentado fazer um código com jquery que irá ficar animando um div com imagem de fundo e com vários elementos, neste momento estou tentando apenas animar a troca das imagens isso ficará em forma de loop, de tempo em tempo troca a imagem.
Meu HTML esta da seguinte forma:
<html>
<head>
<!--Import Google Icon Font-->
<link rel="stylesheet" href="ifrntv.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="ifrntv.js"></script>
<div id="7" class="ifrntv" style="background-image: url("http://localhost:3000/uploads/notice/picture/7/13584198_1063879390367251_539341910_n.jpg"); background-repeat: no-repeat; background-size: 100%; left: -9999px; opacity: 0;">
<div class="time">20:30 10/10/2017</div>
<div class="logo"></div>
<div class="text-notice">
<p class="title-notice">Meu teste 2</p>
<p>kajsajkjks kjssajSLAJSAKLSJ</p>
</div>
</div>
<div id="6" class="ifrntv" style="background-image: url("http://localhost:3000/uploads/notice/picture/6/samanau_geral.png"); background-repeat: no-repeat; background-size: 100%; left: -9999px; opacity: 0;">
<div class="time">20:30 10/10/2017</div>
<div class="logo"></div>
<div class="text-notice">
<p class="title-notice">Exemplo de Imagem</p>
<p>O exemplo deve aparecer corretamente</p>
</div>
</div>
</body>
<object id="3afbcac9-88b8-8a86-8a4b-588cc8b9949f" width="0" height="0" type="application/gas-events-cef"></object>
</html>
Meu CSS está assim:
.ifrntv{
width: 100%;
height: 100%;
position: absolute;
}
.logo {
float: right;
margin-top: 30px;
margin-right: 90px;
width: 10%;
content: url('ifrn.png');
opacity: 0;
}
.time {
margin-top: 300px;
margin-left: 80%;
width: 15%;
height: 20%;
font-size: 30pt;
text-align: center;
background-color: white;
opacity: 0.7;
position: absolute;
border: 2px solid;
border-radius: 25px;
border-color: white;
opacity: 0;
}
.text-notice{
position: absolute;
z-index: 2;
margin: 34% 0% 0% 00%;
left: -9999px;
padding-left: 10%;
width: 100% ;
height: 35%;
font-family: arial, sans-serif;
font-size: 35pt;
background-color: black;
opacity: 0.7;
} font-size: 30pt;
font-family: arial, sans-serif;
} opacity: 1 ;
color: white;
font-size: 20pt;
padding-left: 5%;
font-family: arial, sans-serif;
}
E o JavaScript assim:
$(function(){
iniciar();
})
function iniciar(){
$('body').find('.ifrntv').each(function(){
$(this).animate({left:0,opacity:1.0},{duration:1000,queue:'true',complete:iniciar});
$(this).animate({left:-9999,opacity:0},{duration:4000,queue:'true',complete:iniciar});
//alert(element);
});
console.log(iniciar);
//iniciar();
setTimeout(iniciar,10000);
}
Debugando pelo Chrome o código é executado mas nada acontece, o mais proximo que consegui fazer foi a duas imagens ficar aparecendo juntas, mas o objetivo é aparecer uma, fica um tempo, depois aparece a outra e assim continua sem parar.
Estou esquecendo de algo no código das animações?Discussão (1)
Carregando comentários...