jQuery "animate ()" does not work

0

I'm trying to make a relatively basic effect with the jQuery animate, but it just does not work. The effect in question would be to decrease the margin-top for the element to rise slightly. Note: if I enter an alert instead of the animate in the .js file 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>
    
asked by anonymous 09.03.2018 / 13:23

2 answers

0

You have 2 problems in this code!

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

Click:

<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 in the syntax of the property "margin-top", the correct in this case is "marginTop".

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

Example working: link

    
09.03.2018 / 13:55
0

RESOLVED

I downloaded jQuery and imported it from within the project folder and the error stopped. I did not understand.

    
09.03.2018 / 13:47