如何使用.toggle()方法实现元素位置切换动画而非显示/隐藏？

没问题，完全可以用.toggle()方法实现这个来回移动的效果，不用牵扯到元素的显示隐藏——核心是利用它交替执行多个回调函数的特性（注意版本兼容性），具体思路和代码如下：

方案1：适用于jQuery 1.8及以下版本 #

在旧版jQuery中，.toggle()支持直接传入多个回调函数，每次点击会轮流执行这些函数，刚好符合你“点击右移、再点击左移”的需求，而且不会触发元素的显示/隐藏。

步骤说明： #

• 首先确保目标div的position属性不是默认的static（否则left属性不会生效），设置为relative/absolute/fixed都可以。
• 给div绑定.toggle()，传入两个回调函数：第一个处理右移动画，第二个处理左移动画。

完整代码示例： #

HTML

<div class="move-box">点击我切换位置</div>

CSS

.move-box {
  width: 120px;
  height: 120px;
  background-color: #42b983;
  position: relative; /* 必须设置，保证left属性生效 */
  cursor: pointer;
  line-height: 120px;
  text-align: center;
  color: #fff;
}

JavaScript

$(document).ready(function() {
  $('.move-box').toggle(
    // 奇数次点击：右移50px
    function() {
      $(this).animate({"left": "+=50px"}, 300);
    },
    // 偶数次点击：左移50px回到原位
    function() {
      $(this).animate({"left": "-=50px"}, 300);
    }
  );
});

方案2：适用于jQuery 1.9及以上版本 #

注意：jQuery 1.9及以上移除了.toggle()多回调的特性，默认只保留了显示/隐藏元素的功能。这时候我们可以结合.data()存储状态，在点击逻辑中模拟.toggle()的交替行为，同时避免元素被隐藏：

步骤说明： #

• 给div绑定点击事件，用.data()存储当前是否已经右移的状态。
• 每次点击时切换状态，根据状态执行对应的动画。

完整代码示例： #

JavaScript

$(document).ready(function() {
  $('.move-box').click(function() {
    // 用data存储当前移动状态，初始为false（未移动）
    var isMoved = $(this).data('isMoved') || false;
    
    // 先清空之前的动画队列，避免快速点击导致的动画堆积
    $(this).stop(true);
    
    if (!isMoved) {
      $(this).animate({"left": "+=50px"}, 300);
    } else {
      $(this).animate({"left": "-=50px"}, 300);
    }
    
    // 切换状态并存储
    $(this).data('isMoved', !isMoved);
  });
});

注：如果你坚持要调用.toggle()方法，可以把状态判断逻辑放在回调里，同时手动强制元素保持可见：

$('.move-box').toggle(function() {
  var isMoved = $(this).data('isMoved') || false;
  $(this).stop(true);
  
  if (!isMoved) {
    $(this).animate({"left": "+=50px"}, 300);
  } else {
    $(this).animate({"left": "-=50px"}, 300);
  }
  
  $(this).data('isMoved', !isMoved);
  $(this).show(); // 强制保持显示，避免toggle默认的隐藏行为
});

关键注意事项 #

• 必须给目标div设置非static的定位方式，否则left属性无法改变元素位置。
• 建议在动画前调用.stop(true)清空队列，避免多次快速点击导致的动画堆积问题。
• 可以自定义动画时长（示例中的300毫秒），让移动效果更符合需求。

内容的提问来源于stack exchange，提问作者N. Eli