Exemplo - Animate

Exemplo criado para o post ensinado a usar o "animate" do jquery

by luizpaulo165

HTML

<!-- exemple -->
      <section class="exemple">
        <h2>Exemplo 1</h2>
        <div class="ex1 square"></div>
      </section>
   <!-- end exemple -->
   <!-- exemple -->
      <section class="exemple">
        <h2>Exemplo 2</h2>
        <div class="ex2 square"></div>
      </section>
   <!-- end exemple -->

CSS

/* =============================================================================
   Geral
   ========================================================================== */
   #container{
      display:block;
      position:relative;
   }
   .exemple{
      display:block;
      border-bottom:1px solid #f1f1f1;
      margin:0 auto 30px;
      position:relative;
      top:0;
      left:0;
   }
   .exemple h2{
      display:block;
      margin-bottom:10px;
   }
/* =============================================================================
   exemples
   ========================================================================== */
   .square{
      background:#5DC2F4;
      width:30px;
      height:30px;
      display:block;
      position:relative;
      top:0;
      left:0;
   }

JavaScript

$(function(){
  /*
		Exemplos da função Effect - Animate
	*/

	//exmplo 1
	$("#square").click(function(){
		$(this).animate({
			left: '95%'
		},500);
	});
});