Question

我有一个对象，当我点击按钮时它会移动250px。

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

现在，当我再次单击该按钮时，我希望它将250px移回原位。我是jQuery的新手，看起来那种语言中没有if语句？那我该怎么做呢？

Answer 1

为什么不使用变量来管理状态？像这样：

var isClicked = false;

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

Answer 2

以下是一个可以帮助您的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这样的事情：

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

以上是ternary conditional operation。这意味着：根据以下内容更改right属性：如果toggler为true，则right属性将从当前right减去250个像素属性，否则将添加250个像素。它可以写成

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

最后一个函数是一个回调函数，当动画完成最后一帧时会自动调用它。您也可以在其他地方编写该函数并将其作为回调传递，并在动画结束时执行。您可以在jQuery.animate documentation中阅读相关内容，它是完整的部分

Answer 4

您应该使用布尔变量来跟踪您所处的点击。

请参阅代码段中的示例。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

保存您的州

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 6

＆＃13;

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

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

如何在第一次单击时移动对象250px，在第二次单击时移动250px

6 个答案: