TypeError: p.easing [this.easing] n'est pas une fonction

96

Lorsque j'essaie d'afficher un élément div avec jQuery, j'ai cette erreur:

[23:50:35.971] TypeError: p.easing[this.easing] is not a function @ file:///D:/html5%20puzzle/jquery.js:2

La fonction pertinente est la suivante:

function showWithAnimation(){                  
  console.log('animation called');
  $('#popup').show();
  $("#popup").css({"top": "30%", "left": "30%"})
             .animate({top:(($(window).height()/2)-($('#popup')
             .outerHeight()/2))-70}, 1000, 'easeOutBounce')
             .show();
}

La fonction est chargée d'afficher le div avec une animation de rebond, cependant, le div est affiché mais sans effet de rebond.

ÉDITER:

J'inclus les bibliothèques jQuery et jQueryUI à partir d'un CDN comme celui-ci (dans l'ordre):

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'>
</script>

javascript jquery html

— Malloc
source

142

Vous devez inclure jQueryUI pour les options d'accélération étendues.

Je pense qu'il peut y avoir une option pour n'inclure que l'assouplissement dans le téléchargement, ou au moins juste la bibliothèque de base plus l'assouplissement.

— Je déteste paresseux
source

10

J'inclus ce fichier à partir d'un CDN: <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script> est-ce celui-ci? Ou dois-je inclure un autre fichier?

— Malloc

1

Oui je l'ai fait, mais j'ai toujours eu le même problème, s'il vous plaît jeter un oeil sur mon montage :)

— Malloc

2

Oh je l'ai corrigé, j'incluais à la fois jQuery-min et jQuery dans le même fichier, c'était mon erreur. Merci pour votre aide :)))

— Malloc

3

Que voulez-vous dire? Comment l'avez-vous réparé?

— max4ever

1

Ouais, j'obtiens toujours la même erreur, mais je n'ai inclus qu'un seul fichier source jquery.

— Costa

17

Pour ceux qui ont une version personnalisée de l'interface utilisateur jQuery (bower par exemple), ajoutez le noyau d'effets situé dans ..\jquery-ui\ui\effect.js.

— Tim Vermaelen
source

1

Je n'ai eu à utiliser qu'un seul effet, donc j'ai pu me débrouiller avec juste import "jquery-ui/ui/effects/effect-slide". Merci pour la pointe, Tim!

— aried3r

13

Y compris cela a fonctionné pour moi.

Veuillez inclure la ligne mentionnée ci-dessous dans la section.

<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'>

— Manju
source

10

Le plugin Jquery easing a renommé leurs noms de fonction d'effet à partir de la version 1.2. Si vous avez du javascript en fonction de l'assouplissement et qu'il n'appelle pas le bon nom d'effet, cela générera cette erreur.

— ericopter
source

5

J'ai eu cette erreur aujourd'hui en essayant d'initier un effet de glissement sur un div. Grâce à la réponse de 'Je déteste Lazy' ci-dessus (que j'ai voté pour), je suis allé à la recherche d'un script d'interface utilisateur jQuery personnalisé, et vous pouvez en fait créer votre propre fichier directement sur le site Web de jQuery ui http: // jqueryui. com / télécharger / . Tout ce que vous avez à faire est de marquer le ou les effets que vous recherchez, puis de les télécharger.

Je cherchais l'effet slide. J'ai donc d'abord décoché toutes les cases à cocher, puis cliqué sur la case à cocher «effet de diapositive» et la page vérifie automatiquement les autres composants nécessaires au fonctionnement de l'effet de diapositive. Très simple.

easOutBounce est un effet d'accélération, pour lequel vous devrez cocher la case 'Effects Core'.

— luke_mclachlan
source

4

Si vous utilisez Bootstrap, il est également possible que jQuery de Bootstrap, s'il est inclus sous votre balise de script jQuery, écrase votre balise de script jQuery par une autre version. L'inclusion du propre CDN de jQuery et la suppression de la balise de script jQuery fournie par Bootstrap était la seule chose qui fonctionnait pour moi.

— Matthew Hinea
source

1

Pour tous ceux qui rencontrent cette erreur et que vous avez essayé de mettre à jour les versions et de vous assurer que le noyau d'effets est présent, etc. et vous grattez toujours la tête. Consultez la documentation pour animate () et d'autres syntaxes.

Tout ce que j'ai fait a été d'écrire "Linear" au lieu de "linear" et obtenir le [this.easing] n'est pas une fonction

$ ("# main"). animate ({scrollLeft: '187px'}, 'slow', 'Linear'); //mauvais

$ ("# main"). animate ({scrollLeft: '187px'}, 'lent', 'linéaire'); //bien

— arbre
source

0

J'ai trouvé le problème: n'utilisez pas CDN (cela cause le problème!), Enregistrez plutôt le fichier jquery localement sur votre serveur et le problème est résolu.

— Pasodoble
source

0

L'importation de jquery.easingcdn a fonctionné pour moi.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

Vous pouvez ajouter ce bas de la page Web.

— FaridLU
source