jquery . Animate() does not animate my div

Question

Well, I’m trying to do something supposedly basic using the . Jquery’s Animate() but I can’t get it to anime div, even if I correctly select the html element with "$()". Here is the JSFIDDLE: https://jsfiddle.net/sn6xLe7j/. I was following what’s on the W3S website: http://www.w3schools.com/jquery/jquery_animate.asp .

Grateful!

Answer 1

Simple, just add a relative position in the div you want to animate, there being no specified position attribute the top,bottom,left and right properties become redundant so your animation didn’t work.

Follow the solution to your problem:

function main() {
  $('.mainBtn').click(function() {
    $("#btn1").animate({
      left: '250px'
    }, 300);
  });

}
$(document).ready(main);

.mainBtn {
  margin-top: 25px;
  margin-left: 25px;
  height: 80px;
  width: 80px;
  background-color: tomato;
  border-radius: 50%
}
.subBtn {
  top: 120px;
  left: 130px;
  position: relative
}
.listBtn {
  margin: 5px;
  height: 60px;
  width: 60px;
  background-color: #C5D1EB;
  border-radius: 50%;
  /* Esse position aqui quem faz tudo funcionar */
  position: relative
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- BOTOES DE NAVEGAÇÃO -->
<div class="menu">
  <!-- BOTOES PRINCIPAIS -->
  <div class="mainBtn">
    <div id="menuBurguer"></div>
  </div>
  <!-- BOTOES SECUNDARIOS -->
  <div class="subBtn">
    <div class="listBtn" id="btn1"></div>
    <div class="listBtn" id="btn2"></div>
    <div class="listBtn" id="btn3"></div>
  </div>
</div>