jQuery Girl
  1. jQuery Girl
  3. Comment append ‘easing’ pour animer / scrolltop
Intereting Posts
Est-il possible de joindre un fichier à un email en JavaScript? Indicateur de chargement après avoir cliqué sur le bouton Blocage de JQuery pour une initialisation asynchrone Serveur incapable d’parsingr un json valide Comment utiliser correctement jquery dans un composant WebPart SharePoint – jquery ne se déclenche pas toujours Intégration du plugin jQuery à React Comment désactiver certains contrôles jusqu’à ce que la mise à jour soit réussie? Pourquoi Ajax n’envoie-t-il pas de données? jquery, masquage des balises div en utilisant l’identifiant de certains modèles Comment sauvegarder des données dans une firebase database en utilisant jquery et json dans asp.net Comment puis-je supprimer jquery de l’avant de mon WordPress? Est-il possible de spécifier un port dans un appel ajax Appel de la fonction Jquery depuis le lien GridView L’affectation d’une variable à partir d’un appel ajax de jquery renvoie undefined Problèmes d’affichage lorsque nous passons d’une page mobile jquery à une autre dans Firefox

Comment append ‘easing’ pour animer / scrolltop

J’utilise la fonction suivante pour créer une animation de défilement pour ancrer des liens: 

$('a').click(function(){ $('html, body').animate( {scrollTop: $( $.attr(this, 'href') ).offset().top}, 500 ); return false; });

Je voudrais append assouplissement. Cependant, lorsque j’ajoute ‘easing’ après ‘500’, le script est cassé: 

 $('a').click(function(){ $('html, body').animate( {scrollTop: $( $.attr(this, 'href') ).offset().top}, 500, easing ); return false; });

Des idées que je fais mal?

Vous devez d’abord inclure le script jQuery.UI, puis votre code devrait ressembler à ceci: 

 $('a').click(function(){ var top = $('body').find($(this).attr('href')).offset().top; $('html, body').animate({ scrollTop: top },500, 'easeOutExpo'); return false; });

Pour ton information:

Assouplissement

Le paramètre restant de .animate () est une chaîne nommant une fonction d’accélération à utiliser. Une fonction d’accélération spécifie la vitesse à laquelle l’animation progresse à différents points de l’animation. Les seules implémentations d’assouplissement dans la bibliothèque jQuery sont les modifications par défaut, appelées swing, et celles qui progressent à un rythme constant, appelé linéaires. Des fonctions d’accélération supplémentaires sont disponibles avec l’utilisation de plug-ins, notamment la suite jQuery UI .

Pourquoi votre code ne fonctionne pas:

  1. Parce que vous utilisez this qui était dans la scope de la méthode d’animation et référence aux objects body et html .
  2. Parce que l’ easing n’est pas une méthode. Il s’agit d’un type de chaîne de la propriété d’animation, il est donc nécessaire de l’écrire sous forme de chaîne, par exemple: 'easeOutExpo' .