How do I move an object 250px on first click and 250px back on second click

Question

I have an object and when I click the button it moves 250px.

$(document).ready(function(){
    $("#jqueryAirlinesBut").click(function(){
         $("#flyingDroneImage").animate({right: '250px'});
    });
});

Now when I click the button again I want it to move 250px back to where it was. I am new to jQuery and it seems like there are no if statements in that language? So what do I do this?

jQuery is a framework you still need to know Javascript to use it. IOW if isn't part of jQuery it's part of Javascript — Wranorn, Oct 22 '17 at 01:27

score 1 · Answer 1 · answered Oct 22 '17 at 01:40

You should use a boolean variable to be able to track which click you're on.

See the example in the snippet.

$(document).ready(function() {
  var firstClick = false;
  $("#jqueryAirlinesBut").on('click', function() {
    if (!firstClick) {
      $("#flyingDroneImage").animate({
        left: '+=250px'
      });
      firstClick = true;
    } else {
      $("#flyingDroneImage").animate({
        left: '-=250px'
      });
      firstClick = false;
    }
  });
});

#flyingDroneImage {
  width: 30px;
  height: 30px;
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 30px;
}

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

<button id="jqueryAirlinesBut">Move</button>
<div id="flyingDroneImage"></div>

Thanks your code is working, but I have a question. Above in the beginning of this post @Wold 's give an answer that seem to be the same as yours except that he call the variable that controls the state for 'isClicked' and you call it for 'firstClick'. But for some reason your code works and his doesn't how come ? — cop77, Oct 22 '17 at 13:11

score 0 · Answer 2 · answered Oct 22 '17 at 01:35

0

Why not just use a variable to manage state? Something like this:

var isClicked = false;

$(document).ready(function(){
  $("#jqueryAirlinesBut").click(function(){
     if(!isClicked){
      $("#flyingDroneImage").animate({right: '250px'});
      isClicked = true;
     } else {
      $("#flyingDroneImage").animate({right: '0px'});
      isClicked = false;
     }
  });
});

answered Oct 22 '17 at 01:35

Wold

952
1
13
25

The problem is that on the first click, it goes 500px to the right then on the second click it goes 250 to the right then on the third it goes 250 back. So basically it works except for the first click? – cop77 Oct 22 '17 at 12:30
could that be due to css you have elsewhere? Because I don't specify 500px anywhere in this bit of code. Does it start to the right? – Wold Oct 23 '17 at 01:37

score 0 · Answer 3 · answered Oct 22 '17 at 01:37

Here is an Example which may help you:

$(document).ready(function(){
var moved=false;
  $("button").click(function(){
     if(moved===false){
        $("div").animate({'margin-left': '250px'});
        moved=true;
     }else{
        $("div").animate({'margin-left': '0'});
        moved=false;
      }
    });
});

div{
width:50px;
height:50px;
background:#000;
margin-top:20px
}

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

The problem with your example is it move the website on the second click? — cop77, Oct 22 '17 at 12:27

Jorge Guberte · Answer 4 · 2017-10-22T14:17:04.333

Something like this:

$(document).ready(function() {
    var toggler = true; //keeps track of where to move
    $("#jqueryAirlinesBut").click(function() {
        $('#flyingDroneImage').animate({
            right: toggler ? '-=250' : '+=250' //decides where to move based on the toggler
        }, function() {
            toggler = toggler ? false : true //switches the toggler
        });
    });

});

right: toggler ? '-=250' : '+=250'

The above is a ternary conditional operation. It means: change the right property based on the following: if the toggler is true, the right property will have 250 pixels subtracted from the current right property, otherwise it will have 250 pixels added to it. It could be written as

var amountToChange;
if(toggler == true){
    amountToChange = '+=250'; //Adds 250 to the existing property
}else{
    amountToChange = '-=250'; //Subtracts 250 from the existing property
}

The last function is a callback function, it gets called automatically when the animation finishes its last frame. You can also write that function somewhere else and pass it as the callback, and it will be executed when the animation ends. You can read about it in the jQuery.animate documentation, it's the complete section

Thanks alot it works but I have som questions: FX what does this mean: right: toggler ? '-=250' : '+=250' //I am not taking about what it does but more like what the signs mean. And where is this function activated from: function() { toggler = toggler ? false : true //switches the toggler? — cop77, Oct 22 '17 at 12:32

score 0 · Answer 5 · answered Oct 22 '17 at 01:51

save your state

$(document).ready(function(){

    //  save state
    var isLeft = true;
    
    //  have a function that responds to state
    var goTheOtherWay = function() {
      var r;
      if (isLeft) {
        r = {left: '250px'};
      } else {
        r = {left: 0};
      }
      isLeft = !isLeft;
      return r;
    };

    $("#jqueryAirlinesBut").click(function() {

      //  pass in your state-aware function to $.animate()    
      $("#flyingDroneImage").animate(goTheOtherWay());
    });
});

#canvas {
  postiion: absolute;
}

#flyingDroneImage {
  background-image: url('http://rotorfx.com/wp-content/uploads/2015/12/large_large-3.jpg');
  width: 150px;
  height: 150px;
  border: 1px solid gray;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 50%;
  float: left;
  position: relative;
}

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

<button id="jqueryAirlinesBut">jqueryAirlinesBut</button>

<div id="canvas">
  <div id="flyingDroneImage"></div>
</div>

Thanks your code is working, but why not make it so you say " if isLeft is true go to the right and if isLeft is false go to the left? Why all those extra things like fx the 'r' variable? — cop77, Oct 22 '17 at 13:00
i was trying to make the code read better, but you're right. It can be optimised. The important part is that you save your state and toggle — code_monk, Oct 23 '17 at 02:35

score 0 · Answer 6 · answered Oct 22 '17 at 01:56

$(document).ready(function(){
    $("#jqueryAirlineBut").click(function(){
         ( $("#flyingDroneIMage").css('left') === '0px') ?
         $("#flyingDroneIMage").animate({left: '250px'}) : $("#flyingDroneIMage").animate({left: '0px'});
    });
});

#flyingDroneIMage{
  position:relative;
  right:0px;
}

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

<input type="submit" id="jqueryAirlineBut" value="Click to move"/>
<image id="flyingDroneIMage" src="http://lorempixel.com/400/200"/>

How do I move an object 250px on first click and 250px back on second click

6 Answers6