Accentsconagua

jQuery Succinctly Effets jQuery

Code
Share

Désactiver toutes les méthodes d'effet jQuery

Il est possible de désactiver toutes les méthodes d’animation fournies par jQuery en définissant simplement la valeur de de propriété à vrai.

    
Essaie de m'animer!

Quand de est réglé sur vrai, toutes les méthodes d'effet ne s'animeront pas et seront à la place masquées et affichées immédiatement à l'aide des règles CSS affichage: aucun et bloc de visualisation. Vous pouvez réactiver l'animation en passant le de propriété a faux valeur.

    
 Essaie de m'animer!

Méthode d'animation Grokking the stop ()

Il est souvent nécessaire d’arrêter une animation en cours avant d’en commencer une autre. Par exemple, lorsque vous utilisez la personnalisation mouseenter et laisser la souris événements (ou flotter() méthode), vous pouvez involontairement déclencher un élément déjà en cours d’animation en raison d’une mouseenter ou laisser la souris un événement. Cela provoque une accumulation d'animations en file d'attente, ce qui entraîne une interface lente. Pour éviter cela, utilisez simplement le Arrêtez() méthode pour arrêter l'animation en cours avant de commencer une nouvelle.

    
 Survolez moi!

Retirer le Arrêtez() méthodes du code et passez la souris sur l'élément plusieurs fois pour voir les animations fantômes se produire. Si vous continuez à parcourir l’élément de la page, vous obtiendrez une animation qui ne correspond généralement pas au résultat souhaité..

Remarques: De plus, il est possible non seulement d'arrêter l'animation en cours dans la file d'attente pour l'élément select, mais également la totalité de la file Arrêtez() méthode un paramètre de true. Cela va effectivement arrêter toutes les animations en file d'attente, actives et inactives.

Déterminer si un élément est animé avec: animated

La douane :Animé filtre de sélecteur peut être utilisé pour sélectionner des éléments en cours d’animation. Ci-dessous, j'utilise ce filtre de sélecteur personnalisé pour ajouter du texte à une animation

élément.

Utilisation de show (), hide () et toggle (), sans animation

En utilisant le spectacle(), cacher(), et basculer() les méthodes avec un paramètre entraîneront l'animation des éléments affichés ou masqués en modifiant les propriétés CSS: height, width, opacity, margin, padding. Il est possible de sauter des animations pour masquer et afficher des éléments simplement en ne passant aucun paramètre. Cela change la manière dont ces méthodes ajustent la visibilité d'un élément. Les éléments affectés apparaîtront ou disparaîtront simplement sans aucune animation en ajustant le CSS afficher propriété à la place.

       
Cliquez sur moi (masquer l'animation)
 
Cliquez sur moi (ne pas masquer d'animation)

Remarques: Les méthodes jQuery cacher(), spectacle(), basculer(), glisser vers le haut(), glisse vers le bas(), slideToggle (), lorsqu'il est utilisé sur des éléments qui ont un CSS afficher valeur de en ligne, sera changé en bloc de visualisation pour la durée de l'animation.

Animations séquentielles et non séquentielles de Grokking

Il est important de comprendre la différence entre les animations simultanées et les animations séquentielles. Par défaut, lorsque les méthodes d'effet sont chaînées, elles sont ajoutées à une file d'attente et chaque effet se produit l'un après l'autre..

    
 M'anime! 
 
 M'anime!

En utilisant le animer() méthode, vous pouvez définir des animations pour qu’elles se produisent de manière non séquentielle ou simultanée en transmettant toutes les modifications de propriétés CSS à une seule propriété. animer() appel de méthode. Dans le code ci-dessous, le

animera sa largeur et la largeur de la bordure gauche en même temps.

    
M'anime!

Animate () est la base, abstraction de bas niveau

le animer() méthode est la méthode de base utilisée pour construire toutes les animations préconfigurées, par exemple. cacher(), glisse vers le bas(). Il offre la possibilité de changer (au fil du temps) les valeurs des propriétés de style..

Voici ce que vous devez savoir lorsque vous utilisez cette méthode.

  • Seules les propriétés qui prennent des valeurs numériques sont prises en charge. En d'autres termes, vous ne pouvez pas animer la valeur de, par exemple, la Couleur de fond propriété (du moins pas sans plugin). En outre, les propriétés qui prennent plus d’une valeur comme backgroundPosition ne peut pas être animé.
  • Vous pouvez animer les propriétés CSS en utilisant em et% le cas échéant.
  • Les animations relatives peuvent être spécifiées en utilisant "+ =" ou "- =" devant la valeur de la propriété. Cela déplacerait, par exemple, un élément de manière positive ou négative par rapport à sa position actuelle..
  • Si vous spécifiez une durée d'animation de 0, l'animation définira immédiatement les éléments à leur état final..
  • En tant que raccourci, si une valeur de basculer est passé, une animation sera simplement inversée et animée à cette fin.
  • Toutes les propriétés CSS définies via un seul animer() méthode animera en même temps.

Grokking the Méthodes de fading jQuery

Trois concepts doivent être appelés lorsque vous utilisez le fadeIn (), disparaître(), et fondu au() les méthodes.

  • Contrairement aux autres méthodes d'effet, les méthodes de fondu ajustent uniquement l'opacité d'un élément. Lors de l’utilisation de ces méthodes d’effet, il est supposé que tout élément atténué a déjà une hauteur et une largeur..
  • Les animations en fondu effacent les éléments de leur opacité actuelle.
  • En utilisant le disparaître() La méthode effacera un élément de son opacité actuelle, puis une fois que le fondu sera atténué à 100%, la propriété d'affichage CSS de l'élément sera modifiée. "aucun".

Chacun des points susmentionnés est illustré dans le code ci-dessous.
Code
×