Skip to main content
Corrigindo tag e melhorando formatação
Fonte Link
Rafael Tavares
  • 5,2mil
  • 11
  • 31
  • 52

jQuery "animate()" do jQuery não funciona

Estou tentantotentando fazer um efeito relativamente básicosimples com o animate.animate() do jQuery, mas simplesmente não funcionaestá funcionando. 

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

jQuery "animate()" não funciona

Estou tentanto fazer um efeito relativamente básico com o animate do jQuery, mas simplesmente não funciona. 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.

"animate()" do jQuery não funciona

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().

Fonte Link

jQuery "animate()" não funciona

Estou tentanto fazer um efeito relativamente básico com o animate do jQuery, mas simplesmente não funciona. 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>