Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Solucionado (ver solução)

Animação para de funcionar

Bom dia

Estou aprendendo Jquery: escrevi o código abaixo e a animação está funcionando normalmente.

<!doctype html>
<html lang="pt-BR">

    <head>

        <title></title>

        <meta charset="UTF-8">

        <link rel="stylesheet" href="css/normalize.css">

        <script src="js/jquery-1.11.2.min.js"></script>

    <style>
        ul{
            background: yellow;
            width: 600px;
            height: 80px;
        }

        li{
            background: gray;
            display: inline;
            float: left;
            width: 80px;
            height: 40px;
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>

    </head>

    <body>

        <ul>
            <li>123</li>
            <li>456</li>
            <li>789</li>
        </ul>

        <script>
            $("li").mouseover(function(){
                $(this).animate({height:'70px'}, 600);
            });

            $("li").mouseout(function(){
                $(this).animate({height:'40px'}, 600);
            });
        </script>

    </body>
</html>

Mas quando modifico o código para utilizar o easeOutBounce a animação para de funcionar e por consequência não executa o easing.

$(this).animate({height:'70px'}, 600, 'easeOutBounce');

Alguém sabe dizer o motivo desta interrupção?

Obrigado.

1 resposta
solução

Pessoal

Só para compartilhar, acabei encontrando a solução sozinho. Eu não sabia, mas a questão do easing é um plugin do Jquery, portanto eu não tinha baixado o mesmo.

Assim que eu baixei o arquivo jquery.easing.1.3.min.js e linkei no meu html a animação funcionou perfeitamente.