TypeError: p.easing [this.easing] non è una funzione

96

Quando ho provato a mostrare un elemento div con jQuery, ho ricevuto questo errore:

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

La funzione rilevante è questa:

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 funzione è responsabile di mostrare il div con un'animazione di rimbalzo, tuttavia, il div viene mostrato ma senza effetto di rimbalzo.

MODIFICARE:

Includo le librerie jQuery e jQueryUI da un CDN come questo (in ordine):

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

142

È necessario includere jQueryUI per le opzioni di andamento estese.

Penso che ci possa essere un'opzione per includere solo l'easing nel download, o almeno solo la libreria di base più l'easing.

— Odio i pigri
fonte

10

Sto includendo questo file da un CDN: <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script> è questo? O devo includere un altro file?

— Malloc

1

Sì, l'ho fatto, ma ho sempre lo stesso problema, per favore dai un'occhiata alla mia modifica :)

— Malloc

2

Oh, l'ho risolto, stavo includendo sia jQuery-min che jQuery sullo stesso file, è stato un mio errore. Grazie per il vostro aiuto :)))

— Malloc

3

cosa intendi? come l'hai aggiustato?

— max4ever

1

Sì, ricevo ancora lo stesso errore, ma ho incluso solo un file sorgente jquery.

— Costa

18

Per coloro che hanno una build dell'interfaccia utente jQuery personalizzata (ad es. Bower), aggiungi il core degli effetti situato in ..\jquery-ui\ui\effect.js.

— Tim Vermaelen
fonte

1

Ho dovuto usare un solo effetto, quindi sono stato in grado di ottenere il dovuto con appena import "jquery-ui/ui/effects/effect-slide". Grazie per la punta, Tim!

— aried3r

13

Compreso questo ha funzionato per me.

Si prega di includere la riga menzionata di seguito nella sezione.

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

— Manju
fonte

10

Il plug-in Jquery easing ha rinominato i nomi delle funzioni degli effetti dalla versione 1.2 in poi. Se hai un po 'di javascript a seconda dell'andamento e non sta chiamando il nome dell'effetto corretto, verrà generato questo errore.

— elicottero
fonte

5

Ho ricevuto questo errore oggi mentre cercavo di avviare un effetto diapositiva su un div. Grazie alla risposta di "I Hate Lazy" sopra (che ho votato positivamente), sono andato alla ricerca di uno script jQuery UI personalizzato e puoi infatti creare il tuo file direttamente sul sito web jQuery ui http: // jqueryui. com / download / . Tutto quello che devi fare è contrassegnare gli effetti che stai cercando e quindi scaricare.

Stavo cercando l'effetto diapositiva. Quindi ho prima deselezionato tutte le caselle di controllo, quindi ho fatto clic sulla casella di controllo "effetto diapositiva" e la pagina controlla automaticamente gli altri componenti necessari per far funzionare l'effetto diapositiva. Molto semplice.

easeOutBounce è un effetto di attenuazione, per il quale dovrai selezionare la casella di controllo "Effects Core".

— luke_mclachlan
fonte

4

Se stai utilizzando Bootstrap, è anche possibile che jQuery di Bootstrap, se incluso sotto il tag jQuery script, sovrascriva il tag jQuery script con un'altra versione. L'inclusione del CDN di jQuery e l'eliminazione del tag di script jQuery fornito da Bootstrap è stata l'unica cosa che ha funzionato per me.

— Matthew Hinea
fonte

1

Per chiunque abbia riscontrato questo errore e hai provato ad aggiornare le versioni e assicurarti che il core degli effetti sia presente ecc. E ancora grattandoti la testa. Controlla la documentazione per animate () e altra sintassi.

Tutto quello che ho fatto è stato scrivere "Linear" invece di "linear" e ho ottenuto che [this.easing] non è una funzione

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

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

— albero
fonte

0

Ho trovato il problema: non utilizzare CDN (questo sta causando il problema!), Salva invece il file jquery localmente sul tuo server e poi il problema è risolto.

— Pasodoble
fonte

0

L'importazione di jquery.easingcdn ha funzionato per me.

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

Puoi aggiungere questa parte inferiore della pagina web.

— FaridLU
fonte

0

usa l'ultimo per bootstrap 4 e versioni successive, ciò non influirà sulla tua interfaccia utente

— salman ifrahim
fonte