我如何能恢復的動畫功能的動畫

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>