TypeError: p.easing [this.easing] não é uma função

96

Ao tentar mostrar um elemento div com jQuery, recebi este erro:

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

A função relevante é 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();
}

A função é responsável por mostrar o div com uma animação de salto, entretanto, o div é mostrado, mas sem efeito de salto.

EDITAR:

Estou incluindo bibliotecas jQuery e jQueryUI de um CDN como este (em ordem):

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

Respostas:

142

Você precisa incluir jQueryUI para as opções de atenuação estendidas.

Acho que pode haver uma opção de incluir apenas o easing no download, ou pelo menos apenas a biblioteca base mais o easing.

Eu odeio preguiçoso
fonte
10
Estou incluindo este arquivo de um CDN: <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script> é este? Ou devo incluir outro arquivo?
Malloc
1
Sim, eu fiz, mas sempre tive o mesmo problema, por favor, dê uma olhada na minha edição :)
Malloc
2
Oh, eu consertei, eu estava incluindo jQuery-min e jQuery no mesmo arquivo, esse foi meu erro. Obrigado pela sua ajuda :)))
Malloc
3
O que você quer dizer? Como você consertou isso?
max4ever
1
Sim, ainda estou recebendo o mesmo erro, mas incluí apenas um arquivo de origem jquery.
Costa
17

Para aqueles que têm um build de UI jQuery customizado (bower por exemplo), adicione o núcleo de efeitos localizado em ..\jquery-ui\ui\effect.js.

Tim Vermaelen
fonte
1
Eu só tive que usar um único efeito, então consegui fazer o vencimento com apenas import "jquery-ui/ui/effects/effect-slide". Obrigado pela dica, Tim!
aried3r
13

Incluir isso funcionou para mim.

Inclua a linha mencionada abaixo na seção.

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

Manju
fonte
10

O plug-in de atenuação Jquery renomeou seus nomes de função de efeito da versão 1.2 em diante. Se você tiver algum javascript dependendo do easing e não estiver usando o nome de efeito correto, esse erro será gerado.

ericóptero
fonte
5

Recebi este erro hoje ao tentar iniciar um efeito de slide em um div. Graças à resposta de 'I Hate Lazy' acima (que eu votei), procurei um script jQuery UI personalizado e você pode, de fato, construir seu próprio arquivo diretamente no site jQuery ui http: // jqueryui. com / download / . Tudo que você precisa fazer é marcar o (s) efeito (s) que está procurando e fazer o download.

Eu estava procurando o efeito de slide. Então, primeiro desmarquei todas as caixas de seleção, depois cliquei na caixa de seleção 'efeito de slide' e a página automaticamente verifica os outros componentes necessários para fazer o efeito de slide funcionar. Muito simples.

easyOutBounce é um efeito de atenuação, para o qual você precisará marcar a caixa de seleção 'Effects Core'.

luke_mclachlan
fonte
4

Se você estiver usando o Bootstrap, também é possível que o jQuery do Bootstrap, se incluído abaixo de sua tag de script jQuery, esteja sobrescrevendo sua tag de script jQuery por outra versão. Incluir o próprio CDN do jQuery e excluir a tag de script jQuery que o Bootstrap fornece foi a única coisa que funcionou para mim.

Matthew Hinea
fonte
1

Para quem está passando por esse erro e você tentou atualizar as versões e ter certeza de que o núcleo de efeitos está presente, etc, e ainda está coçando a cabeça. Verifique a documentação para animate () e outras sintaxes.

Tudo que fiz foi escrever "Linear" em vez de "linear" e consegui que [this.easing] não é uma função

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

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

árvore
fonte
0

Eu encontrei o problema: não use o CDN (isso está causando o problema!), Em vez disso, salve o arquivo jquery localmente em seu servidor e o problema será resolvido.

Pasodoble
fonte
0

Importar jquery.easingcdn funcionou para mim.

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

Você pode adicionar esta parte inferior da página da web.

FaridLU
fonte