I dont understand why this simple Jquery doesnt work with the .show method

Question

Hey guys,

Im trying to apply a JQ on the element class on my Jumbotron.

When i just use the .hide() method, it works. but when I add the .show("slow"), it doesnt animate to anything as if it never moved in the first place.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <!-- Navbar -->
    <ul class="nav justify-content-center">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <!-- /Navbar -->

    <!-- Jumbotron-->
    <div class="jumbotron bg-img text-white bg-overlay text-center ">
      <p class="display-2 element"> <span>Hello World!</span></p>
      <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      <hr class="my-4">
      <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
      <p class="lead">
        <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
      </p>
    </div>
    <!-- /Jumbotron -->


    <h1>Hello, world!</h1>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="js/app.js"></script>
  </body>
</html>

Heres the javascript

$(".element").hide().show("slow");

Answer 1 · 2017-06-20T07:43:43Z

June 20, 2017 7:43am

the code runs faster than you can catch it. Fist of if youd want the element to hiddent when the page load I'd suggest ot add a style to the header of your file

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"><link rel="stylesheet" href="css/style.css">
  <style rel="stylesheet">
       .element{
              display:none;
      }
 </style>
  </head>

This will hide the content on load. Then if youd like to show it once everything loads add

     $(document).ready(function(){
          $(".element").show("slow");
     });

$(document).ready forces the script to run only after everything have been loaded

Welcome to the Treehouse Community

Looking to learn something new?

Mark Libario

Mark Libario

I dont understand why this simple Jquery doesnt work with the .show method

1 Answer

Aleksandr Antonov

Aleksandr Antonov