Sítios Web II [SW2]

$('effects')

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw2 link

jQuery

API Efeitos

jQuery effects

  • hide()
  • show()
  • toggle()
  • fade()
  • slide()
  • animate()

▼

hide() e show()

$(selector).hide(speed, callback); $(selector).show(speed, callback); 

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

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

toggle()

$(selector).toggle(speed, callback); 

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

jQuery effect - fade

  • fadeIn()
  • fadeOut()
  • fadeToggle()
  • fadeTo()

▼

fadeIn()

$(selector).fadeIn(speed, callback); 

$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
Teste

fadeOut()

$(selector).fadeOut(speed, callback); 

$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
Teste

fadeToggle()

$(selector).fadeToggle(speed, callback); 

$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
Teste

fadeTo()

$(selector).fadeTo(speed, opacity, callback); 

$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});
Teste

jQuery effect - slide

  • slideDown()
  • slideUp()
  • slideToggle()

▼

slideDown()

$(selector).slideDown(speed, callback); 

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

slideUp()

$(selector).slideUp(speed, callback); 

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

slideToggle()

$(selector).slideToggle(speed, callback); 

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

jQuery - Animate()

▼

$(selector).animate({params},speed,callback); 

$("button").click(function(){
$("div").animate({left:'250px'});
});

Multiplas propriedades


$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

Valores relativos


$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

intervalos de animação


$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});

Bibliotecas de animação

colorlib [EN]

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link