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>