0

Estou tentando fazer um efeito relativamente simples com o .animate() do jQuery, mas não está funcionando.

O efeito em questão seria diminuir o margin-top para que o elemento subisse um pouco. Obs: se eu inserir um alert ao invés do .animate() no arquivo .js ele aparece, o que prova que o erro está no .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>

2 Respostas 2

0

Tu tem 2 problemas neste código!

1 - Tem que carregar a versão do jquery completa, você está utilizando a versão slim.

Carregue:

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

Em vez de:

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

2 - O segundo problema está na syntax da propriedade "margin-top", o correto neste caso é "marginTop".

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

Exemplo funcionando: https://jsfiddle.net/dr87037m/3/

0

RESOLVIDO

Baixei o jQuery e o importei de dentro da pasta do projeto e o erro parou. Não entendi.

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 .