1

Fala galera! Tudo tranquilo?

Então, estou tendo alguns problemas com o funcionamento do JQuery. Estou tentando simplesmente aplicar algumas animações e transições ao meu site, como toggle(), fadeIn() e etc, porém várias delas ou não funcionam, ou funcionam parcialmente.

Por exemplo - enquanto funções como hide() e show() funcionam, fadeIn() e slideToggle() não funcionam. A função toggle(), por sua vez funciona, porém quando passo o parâmetro de velocidade de animação por ela, ele não muda nada.

O que estou suspeitando é que, por eu ter usado o template do Bootstrap, o CDN do JQuery que vem no fim do body com ele está dando algum conflito com o CDN que eu coloquei no head do documento. Porém, já tentei de tudo e nada faz ele funcionar.

Alguém pode me ajudar?

HEAD DO DOCUMENTO

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>PEC</title>

    <script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <!--Javascript-->
    <script type="text/javascript" src="js/script.js"></script>

    <script type='text/javascript'>
        $(document).ready(function(){

            $("#historia").hide();
            $("#metodologia").hide();
            $("#material").hide();
            $("#eventos").hide();

            $('#btn-historia').click(function() {
                $("#historia").toggle(6000);
            });

            $('#btn-metodologia').click(function() {
                $("#metodologia").toggle(6000);
            });

            $('#btn-material').click(function() {
                $("#material").toggle(6000);
            });

            $('#btn-eventos').click(function() {
                $("#eventos").toggle(6000);
            });
        });

    </script>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> 

    <!--CSS-->
    <link href="css/estilo.css" rel="stylesheet" type="text/css">



    <!--FONTS-->
    <link href="https://fonts.googleapis.com/css?family=Archivo" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Krub" rel="stylesheet">


</head>

FINAL DO BODY DO DOCUMENTO

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>



</body>

1 Resposta 1

0

Seu problema é que vc está usando a versão slim do jQuery

https://code.jquery.com/jquery-3.3.1.slim.min.js

A Versão Slim, não tem vários recursos de animação, ajax e outros detalhes, por ser uma versão reduzida das funcionalidades do jQuery padrão.

Sometimes you don’t need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we’ve released a “slim” version that excludes these modules.

Traduzindo: "Às vezes, você não precisa de ajax ou prefere usar uma das muitas bibliotecas independentes que se concentram em solicitações de ajax. E muitas vezes é mais simples usar uma combinação de CSS e manipulação de classe para todas as suas animações da web. Juntamente com a versão regular do jQuery, que inclui os módulos ajax e efeitos, lançamos uma versão "slim" que exclui esses módulos."

Fonte oficial: https://blog.jquery.com/2018/01/20/jquery-3-3-1-fixed-dependencies-in-release-tag/

Minha dica é vc deixas apenas uma versão, a versão padrão completa, ao final do seu documento no lugar da slim, e tira o jquery do head

8
  • 1
    CARA me salvou aqui! Funcionou! Porém uma coisa: como o JQuery está no fim do documento, eu devo linkar o meu arquivo externo de js após ele ou no head mesmo? Commented 11/02/2019 às 23:17
  • @LucasMendesGabriel legal jovem que bom que resolveu ai, evite importat mais de uma biblioteca jQuery, a não ser que seja o jQuery+jQueryUI por exemplo... Mas importar duas versões diferentes do mesmo jQuery não é indicado...
    – hugocsl
    Commented 11/02/2019 às 23:18
  • 1
    cara, muito obrigado mesmo, me ajudou demais! Vou me atentar nesse detalhe! Sigo com essa dúvida - quando coloco o JQuery no documento, devo então linkar meu arquivo externo de js após o JQuery, no fim do body? Commented 11/02/2019 às 23:27
  • @LucasMendesGabriel Exato meu caro! Qualquer arquivo .js que use as dependências do jQuery devi vir após ele no documento. A ordem padrão do próprio Bootstrap primeiro é o jQuery após ele o Popper e depois o Bootstrap.js, o quarto da lista seria o seu Custom.js com seus scripts. Se vc ainda for usar alguma outra biblioteca tipo OwlCarousel ou algo do tipo ela tb deve vir apos o jQuery, mas antes do seu Custom.js []´s
    – hugocsl
    Commented 11/02/2019 às 23:34
  • Hugo, nem sei como agradecer, amigo! De verdade, quebrei a cabeça com isso! Muitíssimo obrigado mesmo! Commented 11/02/2019 às 23:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .