如何不使用toggleClass通过jQuery切换CSS属性实现元素位置动画切换

不用toggleClass的话，可以通过状态跟踪的方式来实现循环切换动画，下面是两种可靠的实现方式：

方案一：使用全局状态变量控制切换 #

通过一个变量记录当前元素的位置状态，每次点击时根据状态执行对应动画，之后切换状态：

// 初始化状态：默认元素在左侧
let isAtLeft = true;

$(".something").click(function(){
  // 先停止目标元素当前的动画，避免多次点击导致动画队列堆积
  $(".name").stop(true);
  
  if(isAtLeft){
    // 切换到左侧动画
    $(".name").animate({left: "0px"}, 1000);
  } else {
    // 切换到右侧动画
    $(".name").animate({right: "0px"}, 1000);
  }
  // 翻转状态，为下一次点击做准备
  isAtLeft = !isAtLeft;
});

方案二：用jQuery data()存储状态（无全局变量） #

如果不想用全局变量，可以借助jQuery的data()方法，把状态直接存在目标元素上，更符合模块化的写法：

$(".something").click(function(){
  const $targetElem = $(".name");
  $targetElem.stop(true);
  
  // 获取当前状态，默认初始为true（元素在左侧）
  const isAtLeft = $targetElem.data("isAtLeft") ?? true;
  
  if(isAtLeft){
    $targetElem.animate({left: "0px"}, 1000);
  } else {
    $targetElem.animate({right: "0px"}, 1000);
  }
  
  // 更新元素上存储的状态
  $targetElem.data("isAtLeft", !isAtLeft);
});

关键注意事项 #

• 必须确保.name元素的CSS设置了position: absolute（或fixed、relative），否则left和right属性不会生效，动画自然也不会动。
• 如果元素初始位置不是left:0或right:0，建议在CSS里先设置初始值，保证第一次点击的动画能正常触发。

内容的提问来源于stack exchange，提问作者Avro_Abir