JQuery animation doesn't work after two clicks

Question

I tried to work on animation through jQuery, and I ran into the problem that the div field only works for 2 clicks. Any help is appreciated. Here is my code:

$(document).ready(function() {
  $("#one").click(function() {
    $("div").animate({
      top: '250px'
    });
  });

  $("#sec").click(function() {
    $("div").animate({
      bottom: '250px'
    });
  });

  $("#thi").click(function() {
    $("div").animate({
      right: '250px'
    });
  });

  $("#for").click(function() {
    $("div").animate({
      left: '250px'
    });
  });
});

.box {
  background: grey;
  height: 20px;
  width: 20px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>

<br><br>
<div class="box">
</div>

Run codeHide result

Here is my code link: https://jsfiddle.net/djmayank/mcutmbcy/1/

Answer 1

Updated violin .

You can only "increase / decrease" offsets top/rightusing +=and -=:

$(function(){
    $("#one").click(function(){
        $("div").animate({top: '+=25px'});
    });
    $("#sec").click(function(){
        $("div").animate({top: '-=25px'});
    });
    $("#thi").click(function(){
        $("div").animate({right: '+=25px'});
    });
    $("#for").click(function(){
        $("div").animate({right: '-=25px'});
    });
});

NOTE. . You can use only one function ready.

Hope this helps.

$(document).ready(function(){
  $("#one").click(function(){
      $("div").animate({top: '+=100px'});
  });
  $("#sec").click(function(){
      $("div").animate({top: '-=100px'});
  });
  $("#thi").click(function(){
      $("div").animate({right: '+=100px'});
  });
  $("#for").click(function(){
      $("div").animate({right: '-=100px'});
  });
});

.box{
  background:grey;
  height:20px;
  width:20px;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>

<br><br>
<div class="box">
</div>

Run codeHide result

Answer 2

, . , top left. bottom right , .

, .ready() jQuery, $(function() { ... }) . . .

$(function(){
    $("#one").click(function(){
        $("div").animate({top: '0px'});
    });

    $("#sec").click(function(){
        $("div").animate({top: '250px'});
    });

    $("#thi").click(function(){
        $("div").animate({left: '250px'});
    });

    $("#for").click(function(){
        $("div").animate({left: '0px'});
    });
});

.box {
  background:grey;
  height:20px;
  width:20px;
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>

<br><br>

<div class="box"></div>

Hide result

Answer 3

top:0 top:250px . , left:0 left:250px.

    $(document).ready(function(){
    $("#one").click(function(){
        $("div").animate({top: '250px'});
    });

    $("#sec").click(function(){
        $("div").animate({top: '0'});
    });

    $("#thi").click(function(){
        $("div").animate({left: '0'});
    });

    $("#for").click(function(){
        $("div").animate({left: '250px'});
    });
});

.box{
  background:grey;
height:20px;
width:20px;
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="one">DOWN</button>
<button id="sec">TOP</button>
<button id="thi">LEFT</button>
<button id="for">RIGHT</button>

<br><br>
<div class="box">
</div>

Hide result

Answer 4

$(document).ready(function() {}); .

$(document).ready(function(){
    $("#one").click(function(){
        $("div").animate({top: '+=250px'});
    });
    $("#two").click(function(){
        $("div").animate({top: '-=250px'});
    });
  	$("#three").click(function(){
        $("div").animate({right: '+=250px'});
    });
  	$("#four").click(function(){
        $("div").animate({left: '+=250px'});
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hide result

Answer 5

. . :

$(function(){

    $("#one").click(function(){
        $("div").animate({top: '250px'});
    });

    $("#sec").click(function(){
        $("div").animate({top: '0px'});
    });

    $("#thi").click(function(){
        $("div").animate({left: '250px'});
    });

    $("#for").click(function(){
        $("div").animate({left: '0px'});
    });
});

CSS:

.box{
    background-color:grey;
    height:20px;
    width:20px;
    position:absolute;
    top: 0px;
    left: 0px;    
}

Note that you only need to change the left and top attributes using jQuery. This is working correctly. You can change the starting position of a field using css, and then move it accordingly in jQuery.