jQuery’s "Immature()" does not work

Asked

Viewed 218 times

0

I’m trying to make a relatively simple effect with the .animate() jQuery, but it’s not working.

The effect in question would be to decrease the margin-top for the element to go up a bit. Note: if I insert a alert instead of .animate() in the file . js it appears, which proves that the error is in the .animate().

$(window).ready(function(){
    $(".nav-item").hover(function() {
            $(this).animate({margin-top:"20px"},2000);
        });
});
body{
    margin: 0 auto;
    padding:0;
}

/*NAVBAR*/

/*FOTO DE FUNDO DO MENU*/
.background-navbar{
    background: url(../img/foto5.jpg) no-repeat center top fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width:100%;
    height:100%;
    z-index: 1;
}

/*DIV QUE APLICA OPACIDADE AO FUNDO*/
.navbar-opacity{
    z-index:3;
    background-color:rgba(0,0,0,0.6);
    background-size:contain;
    width:100%;
    height:100%;
}

/*NAVBAR*/
.navbar{
    background: transparent;
    font-family: 'Text Me One', sans-serif;
    font-size:20px;
    letter-spacing: 3px;
    color:red;

}
.navbar ul li{
    margin:0px 10px 0px 10px;
}
.navbar ul li a font{
    color: white;
}
.nav-item{
    margin:0px;
}
.logo{
    text-align: :center;
    margin-top: 100px;
}


/*Media queries*/
@media (min-width: 992px) {
    .navbar{
        padding-top:100px;
    }
}
@media (max-width: 991px) {
    .navbar-collapse {
       margin-top:40px;
    }
 
}
<html>
    <head>
        <title>BG Fotografia</title>

        <!--Meta Tags-->
        <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/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
                <link rel="stylesheet" href="css/normalize.css"/>
            <!--JS-->
                

        <!--Ekko Lightbox-->
            <!--CSS-->
                <link rel="stylesheet" href="css/ekko-lightbox.css"/>       
        <!--Projeto-->
            <!--CSS-->
                <link rel="stylesheet" href="css/style.css"/>           
            <!--Fonts-->
                <link href="https://fonts.googleapis.com/css?family=Text+Me+One" rel="stylesheet">

    </head>
<body>

<div class="background-navbar">
    <div class="navbar-opacity">

             <nav class="navbar  navbar-toggleable-md navbar-expand-lg navbar-dark">

              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>

              <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">
                <ul class="navbar-nav">

                  <li class="nav-item">
                    <a class="nav-link" href="#"><font>HOME</font></a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#"><font>SOBRE</font></a>
                  </li>

                  <li class="nav-item">
                    <a class="nav-link" href="#"><font>PORTFOLIO</font></a>
                  </li>

                  <li id="ui" class="nav-item">
                    <a class="nav-link" href="#"><font>CONTATO</font></a>
                  </li>

                </ul>
              </div>     
             
            </nav>

            <div class="col-sm-12 align-self-center logo">
                <img id="img" src="img/logo2branco.png" width="300" height="300" alt="">
            </div>

    </div>
</div>




<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/ekko-lightbox.min.js"></script>
<script type="text/javascript" src="js/jscript.js"></script>

</body>
</html>

javascript html jquery jquery-animate

2 answers

0

RESOLVED

I downloaded jQuery and imported it from inside the project folder and the error stopped. I didn’t understand.

0


You have 2 problems in this code!

1 - Have to load the full jquery version, you are using the slim version.

Carry:

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Instead of:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

2 - The second problem is the syntax of the "margin-top" property, the correct one in this case is "marginTop".

    $(window).ready(function(){
    $(".nav-item").hover(function() {
            $(this).animate({marginTop:"20px"},2000);
        });
});

Working example: https://jsfiddle.net/dr87037m/3/

Browser other questions tagged javascript html jquery jquery-animate

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