Retrouvez la liste des effets proposés par jQuery et jQuery UI. Parmi les effets et animations les plus couramment utilisés, vous retrouvez les effets fade (fondu), slide (glissement), animate (animation personnalisée),...
Liste des effets jQuery
$(this).animate({opacity: 0}, {
duration: 3000,
step: function(now, fx){
var rdColor = randowColor();
$(fx.elem).css({'background': rdColor});
}
});
$(this).animate({left:"+=300px", top:"-=160px"}, 2000).animate({left: "-=300px",top:"+=160px"});
$(this).animate({
width: "500px",
height: "300px",
opacity: 0.5,
fontSize: "2em",
borderWidth: "10px"
}, 2000 );
Retrouvez notre documentation pour comprendre comment utiliser les effets jQuery de base : jQuery Effets.
Liste des effets jQuery UI (nécessite jQuery UI en plus de jQuery)
$(this).effect("blind", 800);
$(this).effect("bounce", 500);
$(this).effect("clip", 800);
$(this).effect("drop", 800);
$(this).effect("explode", 800);
$(this).effect("fade",1000);
$(this).effect("fold", 800);
$(this).effect("highlight", 800);
$(this).effect("puff", 800);
$(this).effect("pulsate", 100);
$(this).effect("scale", {percent: 0}, 800);
$(this).effect("shake", "fast");
$(this).effect("size", {to: { width: 200, height: 60 }}, 800);
$(this).effect("slide", 800);
$(this).effect("transfer", {to: "#pulsate", className: "transfer"}, 800);
Liste des effets easing jQuery UI
L'extension jQuery UI vous propose également toute une liste de fonctions easing qui vont vous permettre de définir la progression de votre animation. Vous pourrez par exemple choisir une animation rapide au début et qui ralentit sur la fin ou encore des effets plus impressionnants comme l'effet élastique ou l'effet rebond.
$(canvas).animate( { height: "hide" }, 2000, 'swing').animate( { height: "show" }, 2000,'linear');