Les animations jQuery
- Les animations prédéfinies :
fadeIn() fadeOut()
,slideUp() slideDown()
... - Personnalisation, scrolling :
animate()
,offset()
,scrollLeft
,scrollTop
... - Les timers :
setInterval(), clearInterval()
Icons made by Cursor Creative from www.flaticon.com is licensed by CC 3.0 BY
#01
element.fadeIn(speed, type, callback)
element.fadeOut(speed, type, callback)
element.slideUp(speed, type, callback)
element.slideDown(speed, type, callback)
element
est l'élément sur lequel on souhaite placer l'animationspeed
est la vitesse d'exécution exprimée en milliseconds ou bien via les mots-clésslow
oufast
callback
est une fonction, appelée fonction de rappel et qui sera exécutée à la fin de l'animation.
#02
La fonction animate permet de faire une animation personnalisée en changeant des propriétés CSS. La syntaxe est la suivante :
element.animate(params, speed, callback)
speed, callback
ont la même signification que précédemment. params
sera un objet littéral des propriétés à changer lors de l'animation.
La propriété DOM scrollLeft
permet de définir la position du scroll horizontal de la page. scrollTop
définit le scroll vertical.
#03
Les timers en javascript permettent de répéter des actions à intervalles réguliers.
var timer_id = setInterval(fct, temporisation)
clearInterval(timer_id)
fct
est la fonction qui sera exécutée périodiquementtemporisation
est le temps de temporisation entre 2 exécutions
#04
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat eligendi, error, tenetur quisquam, perferendis consequuntur aspernatur nesciunt quam doloribus distinctio dolorum dolores modi dignissimos. Laboriosam dolores vitae odio. Soluta, deserunt.
#05
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat eligendi, error, tenetur quisquam, perferendis consequuntur aspernatur nesciunt quam doloribus distinctio dolorum dolores modi dignissimos. Laboriosam dolores vitae odio. Soluta, deserunt.