jQuery animation don't work after two clicks

Question

I was trying working on animation through jQuery and I faced a problem that the div box work for only 2 clicks. Any kind of 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> 

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

Answer 1

The problem is you have conflicting properties. If you want to move an element around, only use the top and left coordinates. Using bottom and right essentially tells the browser you want to stretch the element.

Also, the .ready() function has been deprecated for years in jQuery since $(function() { ... }) does the same thing. See below.

 $(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> 

Answer 2

Updated fiddle .

You could "increase/decrease" just the top/right offsets using += 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 could use just one ready function.

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> 

Answer 3

you need to use top:0 for top click and top:250px for bottom click. similarly, you need to use left:0 for left and left:250px for right click.

  $(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> 

Answer 4

There must be a one $(document).ready(function(){}); and write inside all your needed code.

 $(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> 

Answer 5

Using of attributes right and bottom is incorrect. See below:

$(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;    
}

Notice you need to only change the left and top attributes using Jquery. This works correct. You can change the initial positions of the box using css and then move it accordingly in Jquery.