<html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title></title> <link type="text/css" rel="stylesheet" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <style> #block{ position:absolute; left:300px; top:50px; width:100px; height:100px; background-color:black; } #button{ position:absolute; top:200px; width:150px; height:100px; background-color:red; } </style> <script> $(function() { var n = 1; $("#button").on("click", function() { var left = 300 * (n^= 1)+"px"; $('#block').animate({left : left}, 800); }) }); </script> <body> <div id="button"></div> <div id="block"></div> </body> </html>
var left = ((n^= 1) ? 300 : 45) +"px";