TypeError: p.easing [this.easing] no es una función

96

Al intentar mostrar un elemento div con jQuery, recibí este error:

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

La función relevante es esta:

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 función se encarga de mostrar el div con una animación de rebote, sin embargo, el div se muestra pero sin efecto de rebote.

EDITAR:

Estoy incluyendo las bibliotecas jQuery y jQueryUI de un CDN como este (en orden):

<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
fuente

Respuestas:

142

Debe incluir jQueryUI para las opciones de aceleración extendidas.

Creo que puede haber una opción para incluir solo el easing en la descarga, o al menos solo la biblioteca base más el easing.

Odio la pereza
fuente
10
Estoy incluyendo este archivo de una CDN: <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script> ¿Es este? ¿O debo incluir otro archivo?
Malloc
1
Sí, lo hice, pero siempre tuve el mismo problema, por favor, eche un vistazo a mi edición :)
Malloc
2
Oh, lo arreglé, estaba incluyendo jQuery-min y jQuery en el mismo archivo, ese fue mi error. Gracias por su ayuda :)))
Malloc
3
¿Qué quieres decir? como lo arreglaste
max4ever
1
Sí, sigo recibiendo el mismo error, pero solo he incluido un archivo fuente jquery.
Costa
17

Para aquellos que tienen una compilación de interfaz de usuario de jQuery personalizada (bower, por ejemplo), agregue el núcleo de efectos ubicado en ..\jquery-ui\ui\effect.js.

Tim Vermaelen
fuente
1
Solo tuve que usar un único efecto, por lo que pude cumplir con solo import "jquery-ui/ui/effects/effect-slide". ¡Gracias por el consejo, Tim!
3 de
13

Incluir esto funcionó para mí.

Incluya la línea que se menciona a continuación en la sección.

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

Manju
fuente
10

El plugin Jquery easing cambió el nombre de sus funciones de efectos a partir de la versión 1.2. Si tiene algo de javascript dependiendo de la aceleración y no está llamando el nombre de efecto correcto, arrojará este error.

ericóptero
fuente
5

Recibí este error hoy al intentar iniciar un efecto de diapositiva en un div. Gracias a la respuesta de 'I Hate Lazy' anterior (que he votado a favor), fui a buscar un script de interfaz de usuario de jQuery personalizado y, de hecho, puede crear su propio archivo directamente en el sitio web de jQuery ui http: // jqueryui. com / download / . Todo lo que tiene que hacer es marcar los efectos que está buscando y luego descargarlos.

Estaba buscando el efecto de diapositiva. Así que primero desmarqué todas las casillas de verificación, luego hice clic en la casilla de verificación 'efecto de diapositiva' y la página automáticamente verifica esos otros componentes necesarios para que el efecto de diapositiva funcione. Muy simple.

easyOutBounce es un efecto de suavizado, para lo cual deberá marcar la casilla de verificación 'Effects Core'.

luke_mclachlan
fuente
4

Si está utilizando Bootstrap, también es posible que jQuery de Bootstrap, si se incluye debajo de su etiqueta de script jQuery, esté sobrescribiendo su etiqueta de script jQuery con otra versión. Incluir el propio CDN de jQuery y eliminar la etiqueta de script jQuery que proporciona Bootstrap fue lo único que funcionó para mí.

Matthew Hinea
fuente
1

Para cualquiera que esté pasando por este error y haya intentado actualizar las versiones y asegurarse de que el núcleo de efectos esté presente, etc. y aún se esté rascando la cabeza. Consulte la documentación para animate () y otra sintaxis.

Todo lo que hice fue escribir "Lineal" en lugar de "lineal" y obtuve [this.easing] no es una función

$ ("# principal"). animate ({scrollLeft: '187px'}, 'lento', 'Lineal'); //malo

$ ("# principal"). animate ({scrollLeft: '187px'}, 'lento', 'lineal'); //bueno

árbol
fuente
0

Encontré el problema: no use CDN (¡esto está causando el problema!), En su lugar guarde el archivo jquery localmente en su servidor y luego el problema desaparecerá.

Pasodoble
fuente
0

Importar jquery.easingcdn funcionó para mí.

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

Puede agregar esta parte inferior de la página web.

FaridLU
fuente