Aqui o elemento pode ficar 50% transparente ou 50% opaco. Essa função deixa o elemento opaco. Clique aqui Efeitos e depois em fade (in, Out, To) e verifique como o elemento vai ficando transparente e sumindo lentamente.
No javaScrip:
$(document).ready(function(){
$("span:eq(0)").click(function(){
$("div").fadeOut(4000);
});
});
Essa função deixa o elemento transparente e depois opaco novamente.
No javaScrip:
$(document).ready(function(){
$("span:eq(0)").click(function(){
$("div").fadeOut(2000);
$("div").fadeIn(2000);
});
});
Aqui o elemento pode ficar transparente ou opaco, numa variação de 0 a 100%.Clique aqui Efeitos e depois em fade (in, Out, To) e verifique como o elemento vai ficando transparente parando após uma tempo, definido na porcentagem e mantendo assim semi-transparente.
No javaScrip:Essa função alterna entre os dois estados, se opaco fica transparente e vice-versa.
Essa função fecha o elemento de baixo para cima. Clique aqui Efeitos e depois em fade (Slide (Down, Up)
No javaScrip:
$(document).ready(function(){
$("span:eq(0)").click(function(){
$("div").fadeToggle(1000);
});
$("span:eq(1)").click(function(){
$("div").slideUp(2000);
});
});
Essa função abre o elemento de cima para baixo. Como uma persiana. Veja nesse exemplo a cortina sendo fechada, pelo efeito slideUp e logo em seguida sendo aberta, usando o efeito slideDown.
No javaScrip:
$(document).ready(function(){
$("span:eq(0)").click(function(){
$("div").fadeToggle(1000);
});
$("span:eq(1)").click(function(){
});
});
Aqui também o efeito toggle pode ser declarado. Ou seja o elemento é aberto ou fechado de acordo com seu estado. Se fechado abre e vice-versa.
No javaScrip:
$(document).ready(function(){
$("span:eq(0)").click(function(){
$("div").fadeToggle(1000);
});
$("span:eq(1)").click(function(){
$("div").slideUp(2000);
$("div").slideToggle(2000);
});
});
Aqui o elemento é aberto ou fechado de acordo com seu estado. Se fechado abre e vice-versa.
Todas essas funções aceitam as opções de parâmetros, vistas anteriormente em efeitos básicos, que são: velocidade declaradas em strings: normal, slow, fast e milisegundos. Também permitem que as funções sejam utilizadas sem nenhum parâmetro. Na documentação da jQuery em Effects na seção Fading, pode-se entrar nos links para aprofundar o conhecimento, na utilização dos efeitos. E em Sliding. O procedimento é o mesmo.