Efeitos do jQuery

  • Página anterior
  • Próxima página

O jQuery pode criar efeitos de ocultar, mostrar, alternar, deslizar e animações personalizadas.

Experimente você mesmo

Experimente esse efeito jQuery:

CodeW3C.com - O líder em tutoriais de tecnologia Web

No CodeW3C.com, você pode encontrar todos os tutoriais de construção de sites que precisa.

Clique aqui

Exemplo

jQuery hide()
Demonstração simples da função jQuery hide().
jQuery hide()
Outra demonstração de hide(). Como ocultar parte do texto.
jQuery slideToggle()
Demonstração simples do efeito de painel de deslizar do jQuery.
jQuery fadeTo()
Demonstração simples da função jQuery fadeTo().
jQuery animate()
Demonstração simples da função jQuery animate().

Ocultar e exibir do jQuery

Através das funções hide() e show(), o jQuery suporta a ocultação e exibição de elementos HTML:

Exemplo

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

Experimente você mesmo

Ambas as funções hide() e show() podem definir dois parâmetros opcionais: velocidade e callback.

Sintaxe:

$.selector.hide(velocidade, callback)
$.selector.show(velocidade, callback)

speed Os parâmetros especificam a velocidade de exibição ou ocultação. Pode definir esses valores: "slow", "fast", "normal" ou milissegundos.

callback Os parâmetros são nomes de funções executadas após a conclusão das funções hide ou show. Você aprenderá mais sobre isso nas seções subsequentes deste tutorial. callback Conhecimento dos parâmetros.

Exemplo

$("button").click(function(){
$("p").hide(1000);
});

Experimente você mesmo

Alternar do jQuery

A função toggle() do jQuery usa as funções show() ou hide() para alternar o estado de visibilidade de elementos HTML.

Oculta elementos visíveis e mostra elementos ocultos.

Sintaxe:

$.selector.toggle(velocidade, callback)

speed Os parâmetros podem ser definidos com os seguintes valores: "slow", "fast", "normal" ou milissegundos.

Exemplo

$("button").click(function(){
$("p").toggle();
});

Experimente você mesmo

callback O parâmetro é o nome da função executada após a conclusão da função. Você aprenderá mais sobre isso nas seções subsequentes deste tutorial. callback Conhecimento dos parâmetros.

Funções de deslizar do jQuery - slideDown, slideUp, slideToggle

jQuery possui as seguintes funções de deslizar:

$.selector.slideDown(velocidade, callback)
$.selector.slideUp(velocidade, callback)
$(selector).slideToggle(speed,callback)

speed Os parâmetros podem ser definidos com os seguintes valores: "slow", "fast", "normal" ou milissegundos.

callback O parâmetro é o nome da função executada após a conclusão da função. Você aprenderá mais sobre isso nas seções subsequentes deste tutorial. callback Conhecimento dos parâmetros.

Exemplo de slideDown()

$(".flip").click(function(){
$(".panel").slideDown();
});

Experimente você mesmo

Exemplo de slideUp()

$(".flip").click(function(){
$(".panel").slideUp();
}

Experimente você mesmo

Exemplo de slideToggle()

$(".flip").click(function(){
$(".panel").slideToggle();
});

Experimente você mesmo

Funções Fade jQuery - fadeIn(), fadeOut(), fadeTo()

A jQuery possui as seguintes funções fade:

$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback)

speed Os parâmetros podem ser definidos com os seguintes valores: "slow", "fast", "normal" ou milissegundos.

No fadeTo() função, opacity O parâmetro especifica a redução até a opacidade fornecida.

callback O parâmetro é o nome da função executada após a conclusão da função. Você aprenderá mais sobre isso nas seções subsequentes deste tutorial. callback Conhecimento dos parâmetros.

Exemplo de fadeTo()

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

Experimente você mesmo

Exemplo de fadeOut()

$("button").click(function(){
$("div").fadeOut(4000);
});

Experimente você mesmo

Animação Personalizada jQuery

A sintaxe da função jQuery para criar animações personalizadas:

$(selector).animate({params},[duration],[easing],[callback])

O parâmetro crucial é paramsDefine as propriedades CSS aplicadas na animação. É possível definir várias propriedades do tipo simultaneamente:

$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

O segundo parâmetro é durationDefine o tempo aplicado ao animação. O valor definido é: "slow", "fast", "normal" ou milissegundos.

Exemplo 1

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>

Experimente você mesmo

Exemplo 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>

Experimente você mesmo

Os elementos HTML são posicionados estáticos por padrão e não podem ser movidos.

Para permitir que o elemento possa ser movido, defina a posição CSS como relative ou absolute.

Efeito jQuery - Fonte desta página

Função Descrição
$(selector).hide() Esconder o elemento selecionado
$(selector).show() Mostrar o elemento selecionado
$(selector).toggle() Alternar (entre ocultar e mostrar) o elemento selecionado
$(selector).slideDown() Deslizar para baixo (mostrar) o elemento selecionado
$(selector).slideUp() Deslizar para cima (esconder) o elemento selecionado
$(selector).slideToggle() Alternar entre deslizar para cima e para baixo no elemento selecionado
$(selector).fadeIn() Mostrar o elemento selecionado
$(selector).fadeOut() Esconder o elemento selecionado
$(selector).fadeTo() Esconder o elemento selecionado até a opacidade especificada
$(selector).animate() Executar animações personalizadas em elementos selecionados

Para obter o manual completo, acesse nosso Manual de Referência do Efeito jQuery.

  • Página anterior
  • Próxima página