Question

这里是我尝试做的一个简单例子http://jsfiddle.net/ty5dtpd8/

$(':button').click(function(){
    $('#box1').animate({left: '+=300'}, 300);
    $('#box2').animate({top: '-=200', left: '-=100'}, 300);
    $('#box3').animate({left: '+=600'}, 300);    
});

按下按钮时，框移动。我的问题是：如何让它们通过点击恢复到之前的位置，而不必用相反的值重新动画它们？

Answer 1

使用 Conditional (ternary) Operator

尝试这样的操作

var i = true;

$(':button').click(function() {
  $('#box1').animate({
    left: (i ? '+' : '-') + '=300'
  }, 300);
  $('#box2').animate({
    top: (i ? '-' : '+') + '=200',
    left: '-=100'
  }, 300);
  $('#box3').animate({
    left: (i ? '+' : '-') + '=600'
  }, 300);
  i = !i;
});

div {
  display: block;
  position: absolute;
  height: 100px;
  width: 100px;
}
#box1 {
  background: green;
  top: 50px;
  left: 50px;
}
#box2 {
  background: blue;
  top: 450px;
  left: 350px;
}
#box3 {
  background: red;
  top: 350px;
  left: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<input type="button" value="click me"></input>

如何恢复动画功能的动画

1 个答案: