Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Max Miller Silveira

Problemas com animação do JQuery

Por , em Javascript

Recommended Posts

Max Miller Silveira    0

Max Miller Silveira
Postado

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(&quot;http://localhost:3000/uploads/notice/picture/7/13584198_1063879390367251_539341910_n.jpg&quot;); 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(&quot;http://localhost:3000/uploads/notice/picture/6/samanau_geral.png&quot;); 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;
}
.text-notice .notice-title{
  font-size: 30pt;
  font-family: arial, sans-serif;

}
.text-notice p{
  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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

Só por precaução valida a marcação html

  

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript

  • Conteúdo Similar

    • ILR master
      Abrir url na mesma janela
      Por ILR master
      Pessoal, pergunta bem simples. Abaixo tenho o seguinte código:
       
      <script>
      function alerta()
      {
        if (window.confirm("Você realmente quer sair?")) {
          window.open("sair.html");
      }
      }
      </script>
       
      Funciona perfeitamente, só que está abrindo em outra janela e quero que abra na mesma janela.
       
      Alguém pode me ajudar?
    • Giovanird
      Atualizar pagina PHP que esta dentro de uma div
      Por Giovanird
      Olá a todos!
      Tenho uma pagina que possui uma DIV onde coloquei uma pagina PHP.
      Uso a função setInterval para atualizar a pagina inclusa dentro da DIV.
      O problema é que ao acessar o site , a DIV só me mostra a pagina inclusa somente quando completo o primeiro minuto.
      Preciso que a pagina inclusa já inicie carregada
       
      Meu código JavaScript e a DIV com a pagina PHP
       
      <script> function atualiza(){ var url = 'direita.php'; $.get(url, function(dataReturn) { $('#direita').html(dataReturn); }); } setInterval("atualiza()",60000); </script> <div> <span id="direita"></span> </div>  
    • Thiago Duarte
      Drag and Drop para arrastar imagem
      Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • juliosonic
      Menu Navbar CSS Bootstrap
      Por juliosonic
      Boa noite..
      Estou desenvolvendo um site de https://www.maithunatantra.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>  
      Massagem Tantrica em Curitiba
      Tantra Curitiba
      Massagem Tântrica
      Tantra
      Julio Darshan

      Obrigado
      Att
      Julio Cezar
       
       
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito