GSaraiva's Projects » jQuery.Animator http://projects.pro.br/gsaraiva Step by step Tue, 01 Sep 2009 13:14:24 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 jQuery: jQuery.Animator http://projects.pro.br/gsaraiva/2008/05/jquery-jqueryanimator/ http://projects.pro.br/gsaraiva/2008/05/jquery-jqueryanimator/#comments Fri, 23 May 2008 11:04:24 +0000 Gilberto Saraiva http://gsaraiva.projects.pro.br/?p=43 Folks,

I wrote a plugin to make our life easy! the new jQuery.Animator.

the example:

  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript" src="jquery-1.2.5.js"></script>
  6. <script type="text/javascript" src="jquery.animator.js"></script>
  7. <script language="JavaScript">
  8. <!--
  9.   function AnimateWalker(Walker, GoEnd){
  10.     newLeft = parseInt(Walker.css("left")) + 5;
  11.     if(GoEnd) newLeft = 400;
  12.     Walker.css("left", newLeft);
  13.     return (newLeft < 400);
  14.   }
  15.  
  16.   function AnimateWalker3(Walker, GoEnd){
  17.     // GoEnd can't be calculated, it's a infinite animation
  18.     newLeft = parseInt(Walker.css("left")) + 10;
  19.     if(newLeft > 400) newLeft = 0;
  20.     Walker.css("left", newLeft);
  21.     return true; // infinte
  22.   }
  23.  
  24.   $(function(){
  25.     $("#Walker").animator(10, AnimateWalker);
  26.     $("#Walker2").animator(10, AnimateWalker);
  27.     $("#Walker3").animator(10, AnimateWalker3);
  28.   });
  29. //-->
  30. </script>
  31. <body>
  32. <div id="Walker" style="position:relative;left:0;width:100px;height:50px;background:#000;color:#fff">Animation Test</div>
  33. <div id="Walker2" style="position:relative;left:50;width:100px;height:50px;background:#0F0;color:#fff">Animation Test</div>
  34. <div id="Walker3" style="position:relative;left:100;width:100px;height:50px;background:#00F;color:#fff">Animation Test</div>
  35. </body>
  36. </html>

The effect will be like this:

Animation Test
Animation Test
Animation Test

Crazzy uhm?!

jQuery.Animator plugin page

Hugs for all

]]> http://projects.pro.br/gsaraiva/2008/05/jquery-jqueryanimator/feed/ 6 jQuery: Tudo que você precisa é o link http://projects.pro.br/gsaraiva/2008/05/jquery-tudo-que-voce-precisa-e-o-link/ http://projects.pro.br/gsaraiva/2008/05/jquery-tudo-que-voce-precisa-e-o-link/#comments Sat, 17 May 2008 14:27:49 +0000 Gilberto Saraiva http://gsaraiva.projects.pro.br/?p=21 Camaradas,

Como tenho visto muita gente com problemas em relação a compatibilidade e outras coisas,
decidi manter a minha estrutura em relação ao jQuery fixa, como vai funcionar?
Vou manter o link baixo fixo:

  1. <script type="text/javascript" src="http://projects.pro.br/javascripts/jquery/"></script>

Então pra você que está tendo dificuldade com o jQuery, você precisa somente de inserir esse código html na sua página e esquecer que ele existe, é só utilizar e ser feliz.

Um exemplo:

  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript" src="http://projects.pro.br/javascripts/jquery/"></script>
  6. <script language="JavaScript">
  2. <!--
  3.   jQuery(function($){
  4.     background = $.tocolor("#f99");
  5.     $.cssRule({"body":[
  6.       "{background:" + background.hexHTML() + "}",
  7.       {"span": [
  8.         "color",
  9.         {".italic": ["font-style","italic"]}
  10.       ]}
  11.     ]});
  12.  
  13.     $("span").css("position", "absolute");
  14.     $("span").css("left", "50%");
  15.   });
  16. //-->
  2. </script>
  3. <body>
  4. <span>texto <div class="italic">italic</div></span>
  5. <div class="italic">no italic</div>
  6. </body>
  7. </html>

Veja que este código vai funcionar utilizando o jquery que estou disponibilizando.

Vou mante-lo atualizado, e funcional, sempre, pois utilizo ele em outros lugares.

Como este link possui além do jQuery alguns plugins utéis para mim e possivelmente para muitos de vocês, deixei uma forma para que você possa filtrar os plugins carregados:

A lista de plugins (Vou manter essa lista sempre em atualizada)

  1. flydom
    Carrega o plugin FlyDOM.
  2. dimensions
    Carrrega o plugin dimensions.
  3. easing
    Carrrega o plugin jQuery Easing.
  4. cssRule
    Carrrega o plugin jQuery.CssRule.
  5. colors
    Carrrega o plugin jQuery.Colors.
  6. animator
    Carrrega o plugin jQuery.Animator.
  7. dynface
    Carrrega o plugin jQuery.dynface.

Então para você obter o jQuery e algum desses plugins, a sintax abaixo podera ser alterada a seu modo:
http://projects.pro.br/javascripts/jquery/?cssRule=1&colors=1
Essa sintax carrega o jQuery e os plugins jQuery.CssRule e o jQuery.Colors.

Outra maneira de não se perder com o passar do tempo é:

  1. http://projects.pro.br/javascripts/jquery/?flydom=0&dimensions=0&rule=0&easing=0&cssRule=1&colors=1&animator=0&dynface=0

Essa sintax faz a mesma coisa da anterior, mas mantem os plugins que você tem disponíveis para uso mas sem carrega-los, sendo indicado por =0.

Artigos jQuery relacionados:

  • Como iniciar a utilização do jQuery
  • Tudo que você precisa é o link
  • Os Seletores (Selectors)
  • Criando códigos facilitadores

    • Abraços a todos.

    ]]>     http://projects.pro.br/gsaraiva/2008/05/jquery-tudo-que-voce-precisa-e-o-link/feed/ 0