jQuery将调用框动画设置到不同的位置

我的网站上有一个电话图标，当你点击它时，图标会向右滑动，显示出隐藏在网站宽度之外的电话号码。这是我使用的代码：

$(".call-button").click(function(){
$(".call-button").animate({ 
    left: "+=225px",
}, 1000 );
});

问题是，一旦显示电话号码，如果再次单击该框，它会向右移动额外的225px。是否有一种方法可以使其在CSS left属性设置为0时，单击该框后会移回-225px？

尝试使用切换：

$(".call-button").toggle(
  function() {
    $(this).stop(true).animate({ left: "0" }, 1000 );
  }, 
  function() { 
    $(this).stop(true).animate({ left: "-225px" }, 1000 );
  }
);

​