23
May 08

jQuery: jQuery.Animator

:: articles :: by Gilberto Saraiva

Folks,

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

the example:

 HTML |  copy code |? 
01
02
<html>
03
<head>
04
<title></title>
05
<script type="text/javascript" src="jquery-1.2.5.js"></script>
06
<script type="text/javascript" src="jquery.animator.js"></script>
07
<script language="JavaScript">
08
<!--
09
  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>
37


The effect will be like this:




Animation Test


Animation Test


Animation Test


Crazzy uhm?!


jQuery.Animator plugin page


Hugs for all

          

          

          articles —   6 comments

				

			

					

			  
17
May 08

				
jQuery: Tudo que você precisa é o link

        
:: articles :: by Gilberto Saraiva


				

					
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:


 HTML |  copy code |? 
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:


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


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. 

  2. dimensions
    
Carrrega o plugin dimensions.
    3. 

  3. easing
    
Carrrega o plugin jQuery Easing.
    4. 

  4. cssRule
    
Carrrega o plugin jQuery.CssRule.
    5. 

  5. colors
    
Carrrega o plugin jQuery.Colors.
    6. 

  6. animator
    
Carrrega o plugin jQuery.Animator.
    7. 

  7. dynface
    
Carrrega o plugin jQuery.dynface.
    8. 



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 é:


 Bash |  copy code |? 
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.
    
          
    
          
    
          articles —   No comments