Jquery is not working properly

Question

Jquery is not working properly

Asked 5 years, 7 months ago

Viewed 335 times

1

Talk guys! All quiet?

So, I’m having some problems with the functioning of Jquery. I am simply trying to apply some animations and transitions to my site, such as toggle(), fadein() and etc, but several of them either don’t work, or work partially.

For example - while functions like Hide() and show() work, fadein() and slideToggle() do not work. The toggle() function in turn works, but when I pass the animation speed parameter through it, it changes nothing.

What I’m suspecting is that, because I used the Bootstrap template, the Jquery CDN that comes at the end of the body with it is giving some conflict with the CDN that I put in the head of the document. However, I’ve tried everything and nothing makes it work.

Can someone help me?

HEAD OF THE DOCUMENT

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

END OF THE BODY OF THE DOCUMENT

    <!-- 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 answer

Browser other questions tagged html jquery

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-02-11T23:11:58+00:00

Your problem is that you are using the version slim jQuery

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

The Slim Version doesn’t have multiple animation features, ajax and other details, as it is a reduced version of the standard jQuery features.

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.

Translating: "Sometimes you don’t need ajax or prefer to use one of the many independent libraries that focus on ajax. And it’s often simpler to use a combination of CSS and class manipulation for all its animations web. Together with the regular version of jQuery, which includes the modules ajax and effects, lWe announced a "slim" version that excludes these modules."

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

My tip is you leave only one version, the full standard version, at the end of your document instead of the slim, and takes jquery from head