mooth Animated Menu
Uma solução pronta a construir ou a utilizar, dependendo da paciência Diferencia-se pelo efeito Rollover criado, assim irá processar-se alguma animação quando passar o rato por este excelente menu.
Diversos conteúdos para programadores web! E muito mais!


1
2
3
| <head><script type="text/javascript" src="jquery.js"></script></head> |
1
2
3
| <head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head> |
1
2
3
| <head><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script></head> |
1
2
3
4
5
6
7
| $(this).hide() // Esconde o elemento actual$("p").hide() // Esconde todos os parágrafos$("p.teste").hide() // Esconde todos os parágrafos com a classe="teste"$("#test").hide() // Esconde o elemento com o id="teste" |
1
2
3
4
5
| $("p") selecciona os elementos <p>$("p.intro") seleccionar todos os elementos <p> com class="intro".$("p#demo") selecciona o primeito elemento <p> com id="demo". |
1
2
3
4
5
6
7
| $("[href]") // Selecciona todos os elementos com um atributo href$("[href='#']") // Seleccionar todos os elementos com um valor href igual a "#"$("[href!='#']") // Selecciona todos os elementos com um valor href não igual a "#"$("[href$='.jpg']") // Selecciona todos os elementos com um atributo href que acabe em ".jpg" |
1
| $("p").css("background-color","yellow"); |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });});</script></head><body><h2>Isto é um titulo</h2><p>Isto é um parágrafo.</p><p>Isto é mais um parágrafo.</p><button>Clica-me</button></body></html> |
1
2
3
4
| <head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="a_minha_funçao.js"></script></head> |
1
2
3
4
5
6
| $("#hide").click(funçao(){ $("p").hide();});$("#show").click(funçao(){ $("p").show();}); |
1
2
3
| $(selector).hide(speed,callback)$(selector).show(speed,callback) |
1
2
3
4
5
| $("botao").click(funçao(){$("p").hide(800);)); |
1
| $(selector).toggle(speed,callback) |
1
2
3
4
5
| $("botao").click(funçao(){$("p").toggle(850);)); |
1
2
3
4
5
| $(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback) |
1
2
3
4
5
| $("flip").click(function(){ $(".panel").slideDown();)); |
1
2
3
4
5
| $("flip").click(function(){ $(".panel").slideUp();)); |
1
2
3
4
5
| $("flip").click(function(){ $(".panel").slideToggle();)); |
1
2
3
4
5
| $(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback) |
1
2
3
4
5
| $("botão").click(funçao(){ $("div").fadeIn(2000);)); |
1
2
3
4
5
| $("botão").click(funçao(){ $("div").fadeIn(2000);)); |
1
2
3
4
5
| $("botão").click(funçao(){ $("div").fadeTo("slow",0.30);)); |
1
| $(selector).animate({parametros},[duracao],[e asing],[callback]) |
1
| animate({width:"60%",opacity:0.3,marginTop:"0.3in",fontsize:"2em"}) |
1
2
3
4
5
6
7
8
9
10
11
12
13
| <script type="text/javascript">$(document).ready(funcao(){ $("botao").click(funcao(){ $("div").animate({left:"29px"},"slow"); $("div").animate({fontsize:"4em","slow"); ));)); |
1
| </script> |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| $(selector).hide()$(selector).show()$(selector).toggle()$(selector).slideDown()$(selector).slideUp()$(selector).slideToggle()$(selector).fadeIn()$(selector).fadeOut()$(selector).fadeTo()$(selector).animate() |
1
2
3
| $("p").hide(1000,function(){ alert("O parágrafo foi escondido");}); |
1
| $("p").html("Escola de Criatividade"); |
1
2
| $("p").append("Escola de Criatividade");$("p").prepend("Escola de Criatividade"); |
1
| $("p").after(" Escola de Criatividade."); |
1
| $("p").before("Escola de Criatividade."); |
1
| $(this).css("background-color"); |
1
| $("p").css("background-color","yellow"); |
1
| $("p").css({"background-color":"yellow","font-size":"200%"}); |
1
2
3
| $("#div1").height("200px"); // altura$("#div1").width("200px"); // largura |
1
2
3
4
5
| $(document).ready(function(){ // Funções jQuery entram aqui}); |