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>

javascript jquery html

— Malloc
fonte

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