Função Animate jQuery

Função Animate jQuery

jQuery Animate: Aprenda a fazer uma animação em jQuery. Aprenda neste tutorial à fazer animações usando o método .animate().

Vamos Adicionar o HTML.

Nesta seção, projetaremos uma estrutura simples na tag html <div class=”box-seta”>. temos dentro da tag <div> a tag <i> para criarmos a animação do icone seta.

  <div class="box-seta">
     <i class="setaScroll"></i>
  </div>

Vamos Adicionar o Css.

Nesta seção, usaremos algumas propriedades CSS para projetar a seta. para obter o Formato de Seta no no Css.

.box-seta {

    position:relative; 
    display:inline;
}

.setaScroll{

   border:solid #000;
   border-width: 0 5px 5px 0;
   padding: 7px;
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   position: absolute;
   top:0;
   left:0;
   opacity:.3;

}

Vamos Adicionar o Script

Nesta seção, usaremos a Função Animate jQuery

<script>
    
$(function(){

   (function anima(){
      
      $(".setaScroll").animate({
         "top": "8",
         "opacity": "1"
      }, 400, function(){
         $(this).animate({
            "top": "12",
            "opacity": ".1"
         }, 400, function(){
            $(this).css("top", "0"); 
            anima();
         });
      });

    }())

});

</script>

Nesta seção, combinaremos as Três seções acima para criar a seta animada Utilizando

HTML, CSS e jQuery.

Código completo veja o resultado !

Baixar Código Veja Funcionando