jquery .animate () does not animate my div

Question

jquery .animate () does not animate my div

Navigation

#1 by (2 votes)

-1

Well, I'm trying to do something supposedly basic using Jquery's .animate (), but I can not get it to animate the div, even by correctly selecting the html element with the "$ ()". Here's JSFIDDLE: link . I was following what's on the W3S website: link .

Thank you!

javascript jquery

asked by anonymous 14.02.2016 / 00:17

1 answer

Staff a problem that seems very silly about the connection in PHP How to execute query at the turn of the day? [closed]

score 2 · Accepted Answer

___ erkimt ___ jquery .animate () does not animate my div ______ qstntxt ___

Well, I'm trying to do something supposedly basic using Jquery's .animate (), but I can not get it to animate the div, even by correctly selecting the html element with the "$ ()". Here's JSFIDDLE: link . I was following what's on the W3S website: link .

Thank you!

______ ___ azszpr113114

Simple, just add a relative position in the div you want to animate, and there is one position attribute specified the properties top, bottom, left and right are now redundant so your animation did not work.

Here's 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><!--BOTOESDENAVEGAÇÃO--><divclass="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>

___