Visualisation d'une page Webjax
Effets JQuery
Cette page est propulsée par 
Cette page Webjax vous présente les fonctionnalités JQuery qui vous permettent de gérer l'ajout d'effets visuels sur des éléments DOM, toujours sélectionnables
en liste comme c'est de rigueur avec JQuery.
00 :: Effets basiques applicables , Basics:
show( ) show( speed, callback )
Permet soit de rendre visible un set d'éléments DOM sélectionnés, soit de faire la même chose mais avec la possibilité d'ajouter une option "speed" (en millisecondes) et
des fonctions "callback".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
hide( ) hide( speed, callback )
Permet soit de rendre non-visible un set d'éléments DOM sélectionnés, soit de faire la même chose mais avec la possibilité d'ajouter une option "speed" (en millisecondes) et
des fonctions "callback".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
toggle( )
Cette instruction permet de "toogler" , d'interchanger le statut de visibilité d'un set d'éléments DOM sélectionnés.
Si les éléments sont visibles ils deviennent non-visibles et inversement.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
01 :: Effets de glissement applicables , Sliding:
slideDown( speed, [callback] )
Cette instruction permet de faire apparaître un set d'éléments sélectionnés et d'ajouter éventuellement une fonction "callback".
Seule la hauteur est ajustée pour cet effet ce qui donne une impression d'apparition de type "slide".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
slideUp( speed, [callback] )
Cette instruction permet de faire disparaître un set d'éléments sélectionnés et d'ajouter éventuellement une fonction "callback".
Seule la hauteur est ajustée pour cet effet ce qui donne une impression disparition de type "slide".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
slideToggle( speed, [callback] )
Instruction qui permet de "toogler" , interchanger le statut de visibilité d'un set d'éléments DOM sélectionnés.
Seule la hauteur est ajustée pour obtenir cet effet ce qui donne l'impression d'une apparition de type "slide".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
02 :: Effets de fondu applicables , Fading:
fadeIn( speed, callback )
Instruction qui permet d'effectuer un "fadein" sur un set d'éléments DOM sélectionnés avec la possibilité d'ajouter une fonction "callback".
Seule l'opacité est ajustée pour créer cet effet ce qui signifie que la largeur et la hauteur seront rapidement identifiables durant l'effet.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
fadeOut( speed, callback )
Instruction qui permet d'effectuer un "fadeout" sur un set d'éléments DOM sélectionnés avec la possibilité d'ajouter une fonction "callback".
Seule l'opacité est ajustée pour créer cet effet ce qui signifie que la largeur et la hauteur seront rapidement identifiables durant l'effet.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
fadeTo( speed, opacity, callback )
Instruction qui permet d'effectuer un "fadeto" sur un set d'éléments DOM sélectionnés avec la possibilité d'ajouter une fonction "callback".
Seule l'opacité est ajustée pour créer cet effet ce qui signifie que la largeur et la hauteur seront rapidement identifiables durant l'effet.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
03 :: Effets personnalisés , Custom:
!!! :: attention, pour toutes les démonstrations d'exemples d'effets personnalisés, vous devez reprendre les codes sources
en version locale afin de pouvoir voir l'effet concret. En effet toutes les box doivent être placés en "position:absolute" pour que
les animations fonctionnent correctement. Notez que dans cette page toutes les box ont vu leur propriété de style "position" supprimée ce qui
signifie que vous devrez la réinclure si vous testez l'exemple en local.
Vous pouvez obtenir une visualisation concrète des animations sur la documentation officielle.
animate( params, [duration], [easing], [callback] )
Cette instruction sert à fabriquer des animations personnalisées d'éléments.
Il est important pour fabriquer ses animations de prendre l'objet de propriétés de style(s) qui seront animés. Chaque clé d'un tel objet
représente une propriété de style qui sera animée (ex : "height", "top", "opacity").
Attention les propriétés doivent être notés de la façon suivante "marginLeft" et non "margin-left".
La valeur associée avec une clé d'objet représente le statut final de la propriété à la fin de son animation.
Si un nombre est fourni, la propriété transitera de son ancienne valeur à cette nouvelle valeur.
Autrement si les chaînes "hide", "show", "toogle" sont identifiées, une animation par défaut sera construite pour la propriété.
Seules les propriétés de style prenant une valeur numérique sont autorisées (ex : "backgroundColor" n'est pas utilisable avec "animate()").
Notes spécifiques à JQuery 1.2 :: Avec JQuery 1.2 vous pouvez animer des propriétés par "em" et "%" (quand applicable). De plus,
avec JQuery 1.2 vous pouvez effectuer des animations relatives en spécifiant "+=" ou "-=" avant la valeur de la propriété pour effectuer la transition
depuis la valeur actuelle de la propriété de style.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
animate( params, options )
Cette instruction sert à fabriquer des animations personnalisées d'éléments.
Il est important pour fabriquer ses animations de prendre l'objet de propriétés de style(s) qui seront animés. Chaque clé d'un tel objet
représente une propriété de style qui sera animée (ex : "height", "top", "opacity").
Attention les propriétés doivent être notés de la façon suivante "marginLeft" et non "margin-left".
La valeur associée avec une clé d'objet représente le statut final de la propriété à la fin de son animation.
Si un nombre est fourni, la propriété transitera de son ancienne valeur à cette nouvelle valeur.
Autrement si les chaînes "hide", "show", "toogle" sont identifiées, une animation par défaut sera construite pour la propriété.
Seules les propriétés de style prenant une valeur numérique sont autorisées (ex : "backgroundColor" n'est pas utilisable avec "animate()").
Notes spécifiques à JQuery 1.2 :: Avec JQuery 1.2 vous pouvez animer des propriétés par "em" et "%" (quand applicable). De plus,
avec JQuery 1.2 vous pouvez effectuer des animations relatives en spécifiant "+=" ou "-=" avant la valeur de la propriété pour effectuer la transition
depuis la valeur actuelle de la propriété de style.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
stop( )
Instruction qui permet de stopper une animation sur un set d'éléments DOM sélectionnés.
Si des animations sont présentes en "queue" pour démarrer, elles démarreront immédiatement.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
queue( )
Instruction qui retourne une référence au premier élément en "queue" (qui est un "array" de fonctions).
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
queue( callback )
L'instruction permet également d'attacher une fonction à la fin de la "queue" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
queue( queue )
L'instruction peut également être utilisée pour recopier une "queue" dans la "queue" d'un set d'éléments sélectionnés.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
dequeue( )
Cette instruction permet de supprimer une fonction présente au début de la "queue" pour l'exécuter.
Utile par exemple comme dans le cas
présenté dans l'exemple ci après qui permet de supprimer une propriété de style "color" avant la fin de l'animation sans la bloquer ou en provoquer l'arrêt.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
Cette page Webjax vous présente les fonctionnalités JQuery qui vous permettent de gérer l'ajout d'effets visuels sur des éléments DOM, toujours sélectionnables en liste comme c'est de rigueur avec JQuery.
00 :: Effets basiques applicables , Basics:
show( ) show( speed, callback )
Permet soit de rendre visible un set d'éléments DOM sélectionnés, soit de faire la même chose mais avec la possibilité d'ajouter une option "speed" (en millisecondes) et des fonctions "callback".Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
hide( ) hide( speed, callback )
Permet soit de rendre non-visible un set d'éléments DOM sélectionnés, soit de faire la même chose mais avec la possibilité d'ajouter une option "speed" (en millisecondes) et des fonctions "callback".Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
toggle( )
Cette instruction permet de "toogler" , d'interchanger le statut de visibilité d'un set d'éléments DOM sélectionnés.Si les éléments sont visibles ils deviennent non-visibles et inversement.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
01 :: Effets de glissement applicables , Sliding:
slideDown( speed, [callback] )
Cette instruction permet de faire apparaître un set d'éléments sélectionnés et d'ajouter éventuellement une fonction "callback".Seule la hauteur est ajustée pour cet effet ce qui donne une impression d'apparition de type "slide".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
slideUp( speed, [callback] )
Cette instruction permet de faire disparaître un set d'éléments sélectionnés et d'ajouter éventuellement une fonction "callback".Seule la hauteur est ajustée pour cet effet ce qui donne une impression disparition de type "slide".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
slideToggle( speed, [callback] )
Instruction qui permet de "toogler" , interchanger le statut de visibilité d'un set d'éléments DOM sélectionnés.Seule la hauteur est ajustée pour obtenir cet effet ce qui donne l'impression d'une apparition de type "slide".
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
02 :: Effets de fondu applicables , Fading:
fadeIn( speed, callback )
Instruction qui permet d'effectuer un "fadein" sur un set d'éléments DOM sélectionnés avec la possibilité d'ajouter une fonction "callback".Seule l'opacité est ajustée pour créer cet effet ce qui signifie que la largeur et la hauteur seront rapidement identifiables durant l'effet.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
fadeOut( speed, callback )
Instruction qui permet d'effectuer un "fadeout" sur un set d'éléments DOM sélectionnés avec la possibilité d'ajouter une fonction "callback".Seule l'opacité est ajustée pour créer cet effet ce qui signifie que la largeur et la hauteur seront rapidement identifiables durant l'effet.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
fadeTo( speed, opacity, callback )
Instruction qui permet d'effectuer un "fadeto" sur un set d'éléments DOM sélectionnés avec la possibilité d'ajouter une fonction "callback".Seule l'opacité est ajustée pour créer cet effet ce qui signifie que la largeur et la hauteur seront rapidement identifiables durant l'effet.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
03 :: Effets personnalisés , Custom:
!!! :: attention, pour toutes les démonstrations d'exemples d'effets personnalisés, vous devez reprendre les codes sources en version locale afin de pouvoir voir l'effet concret. En effet toutes les box doivent être placés en "position:absolute" pour que les animations fonctionnent correctement. Notez que dans cette page toutes les box ont vu leur propriété de style "position" supprimée ce qui signifie que vous devrez la réinclure si vous testez l'exemple en local.
Vous pouvez obtenir une visualisation concrète des animations sur la documentation officielle.
animate( params, [duration], [easing], [callback] )
Cette instruction sert à fabriquer des animations personnalisées d'éléments.Il est important pour fabriquer ses animations de prendre l'objet de propriétés de style(s) qui seront animés. Chaque clé d'un tel objet représente une propriété de style qui sera animée (ex : "height", "top", "opacity").
Attention les propriétés doivent être notés de la façon suivante "marginLeft" et non "margin-left".
La valeur associée avec une clé d'objet représente le statut final de la propriété à la fin de son animation.
Si un nombre est fourni, la propriété transitera de son ancienne valeur à cette nouvelle valeur.
Autrement si les chaînes "hide", "show", "toogle" sont identifiées, une animation par défaut sera construite pour la propriété.
Seules les propriétés de style prenant une valeur numérique sont autorisées (ex : "backgroundColor" n'est pas utilisable avec "animate()").
Notes spécifiques à JQuery 1.2 :: Avec JQuery 1.2 vous pouvez animer des propriétés par "em" et "%" (quand applicable). De plus, avec JQuery 1.2 vous pouvez effectuer des animations relatives en spécifiant "+=" ou "-=" avant la valeur de la propriété pour effectuer la transition depuis la valeur actuelle de la propriété de style.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
animate( params, options )
Cette instruction sert à fabriquer des animations personnalisées d'éléments.Il est important pour fabriquer ses animations de prendre l'objet de propriétés de style(s) qui seront animés. Chaque clé d'un tel objet représente une propriété de style qui sera animée (ex : "height", "top", "opacity").
Attention les propriétés doivent être notés de la façon suivante "marginLeft" et non "margin-left".
La valeur associée avec une clé d'objet représente le statut final de la propriété à la fin de son animation.
Si un nombre est fourni, la propriété transitera de son ancienne valeur à cette nouvelle valeur.
Autrement si les chaînes "hide", "show", "toogle" sont identifiées, une animation par défaut sera construite pour la propriété.
Seules les propriétés de style prenant une valeur numérique sont autorisées (ex : "backgroundColor" n'est pas utilisable avec "animate()").
Notes spécifiques à JQuery 1.2 :: Avec JQuery 1.2 vous pouvez animer des propriétés par "em" et "%" (quand applicable). De plus, avec JQuery 1.2 vous pouvez effectuer des animations relatives en spécifiant "+=" ou "-=" avant la valeur de la propriété pour effectuer la transition depuis la valeur actuelle de la propriété de style.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
stop( )
Instruction qui permet de stopper une animation sur un set d'éléments DOM sélectionnés.Si des animations sont présentes en "queue" pour démarrer, elles démarreront immédiatement.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
queue( )
Instruction qui retourne une référence au premier élément en "queue" (qui est un "array" de fonctions).Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
queue( callback )
L'instruction permet également d'attacher une fonction à la fin de la "queue" d'un set d'éléments sélectionnés.Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
queue( queue )
L'instruction peut également être utilisée pour recopier une "queue" dans la "queue" d'un set d'éléments sélectionnés.Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
dequeue( )
Cette instruction permet de supprimer une fonction présente au début de la "queue" pour l'exécuter.Utile par exemple comme dans le cas présenté dans l'exemple ci après qui permet de supprimer une propriété de style "color" avant la fin de l'animation sans la bloquer ou en provoquer l'arrêt.
Vous pouvez tester l'exemple en utilisant le formulaire ci après :
Le code source de cet exemple est ci après présenté :
: 11/03/2008 22:05:32 | 
: 
