------------------------------------- --- jquery.min.js + jquery-ui.min.js --- ------------------------------------- PS: jquery.min.js Ž o arquivo pai. O ui, contempla diversas funcoes. 0. GERAL elemento.funcao1().funcao2("funcao", "duracao", "easing", **outra funcao p acontecer no final** ).funcao3(); PS: Acho que a posição dentro do parenteses não importa (verificar) PS: O Elemento: $("#id"). ou $(".class") ou $(this) É possivel usar hierarquias de seletor, exemplo: $("#id *"), $(".class table ."+var), etc. Existe seletores amigaveis do jquery, como next e prev, ex: $("id").prev() para pegar elementos anteriores ou posteriores so seletor. Ou child: $("#id:child) E outros que identificam comportamentos, exemplo: &("#id:hidden") ou $("#id:visible) para pegar elementos de acordo com o style display, por exemplo. Para saber mais, pesquise por seletores de jquery 1. SIMPLES $("#meuId").css("opacity","0.0"); $(".minhaClass").attr('id', 'myId'); $("#meuId").addClass('minhaClass'); PS: Acima se quiser escrever alguma coisa. Caso queira apenas ler: nao use o segundo atributo: $("#meuId").css("color"); 2. FUNCAO COM ATRIBUTOS - .toggle( [ duration ]) $(".minhaClass").animate( {opacity: 1.0} , "slow" ); 2a: A DURACAO PODE SER NUMERICA AO INVES DE STRING: $(".minhaClass").animate({ backgroundColor: "#000" }, 800); 3. MAIS DE UMA FUNCAO EM UM MESMO ELEMENTO (SEPARADO POR PONTO): $("#meuId").stop().animate( {opacity: 1.0} , "slow" ); $("#meuId").removeClass('oldClass').addClass('newClass') 4. UMA FUNCAO PARA ACONTECER NO FINAL DA PRIMEIRA FUNCAO - .toggle( [ duration ], [ callback ] ) $(".minhaClass").stop().animate( {opacity: 1.0} , "slow" , function(){$(".minhaClass").addClass('cloned');} ); 4a. O MESMO QUE O DE CIMA, POREM MAIS VISIVEL $('#book').toggle('slow', function() { // Animation complete. }); 4b. O MESMO QUE O DE CIMA $(".minhaClass").stop().animate({ backgroundColor: "#9fafbf" }, 100); //final },function() { $(".minhaClass").stop().animate({ backgroundColor: "#000" }, 800); //inicial }); PS: A funcao animate pode conter mais de um efeito (Ta sem o callback): $(".minhaClass").stop().animate( {color: "#fff", backgroundColor: '#9fafbf', opacity: 1.0} , "slow"); 5. COM EASING - .toggle( [ duration ], [ easing ], [ callback ] ); $(".minhaClass").stop().animate({ backgroundColor: "#000" }, 800, "easeInOutExpo", function(){$(".minhaClass").addClass('cloned');} ); .toggle( showOrHide ) 6. SHOW OR HIDE --------------- --- eventos --- --------------- 5. EVENTOS (CLICK, OVER, MOUSEOUT, MOUSELEAVE, ETC): $("#carrosselClick").click(function () { $(this).css("opacity","0.0"); }); 6. SEMELHANTE AO EVENTO ONLOAD (ACHO) $(document).ready(function(){ $(".rodapeLink").hover(function() { }); });