如何在jQuery中结合toggle()与animate()实现动画切换效果

当然可以结合toggle的逻辑和animate()实现这种点击切换动画的需求，不过要注意：jQuery 1.9及以上版本移除了旧版toggle()绑定交替点击回调的功能，所以我们需要通过状态标记来模拟类似的切换逻辑，以下是具体解决方案：

问题分析 #

你当前的代码仅实现了正向动画逻辑，没有判断元素当前状态，所以无法触发反向重置动画。同时原代码中width: '20'和height: '20'缺少单位px，可能导致动画解析异常。

解决方案1：使用状态变量跟踪动画状态 #

修改JavaScript代码如下：

$(document).ready(() => {
  let isAnimated = false; // 标记方块是否已完成正向动画
  $('.main').click(() => {
    const $square = $('.squre');
    // 根据状态选择动画目标属性
    const animateProps = isAnimated 
      ? { left: '-200px', rotate: '0deg', width: '200px', height: '200px' }
      : { left: '200px', rotate: '300deg', width: '20px', height: '20px' };
    
    $square.animate(animateProps, 500);
    isAnimated = !isAnimated; // 切换状态
  });
});

解决方案2：用jQuery.data()存储元素状态（避免全局变量） #

如果不想用全局变量，可以给元素绑定状态数据：

$(document).ready(() => {
  $('.main').click(() => {
    const $square = $('.squre');
    // 读取当前状态，默认false
    const isAnimated = $square.data('animated') || false;
    const animateProps = isAnimated 
      ? { left: '-200px', rotate: '0deg', width: '200px', height: '200px' }
      : { left: '200px', rotate: '300deg', width: '20px', height: '20px' };
    
    $square.animate(animateProps, 500);
    $square.data('animated', !isAnimated); // 更新状态
  });
});

解决方案3：结合toggleClass模拟toggle切换逻辑 #

利用toggleClass()给元素添加/移除类作为状态标记，实现类似toggle的切换效果：

$(document).ready(() => {
  $('.main').click(() => {
    const $square = $('.squre').toggleClass('animated');
    const animateProps = $square.hasClass('animated')
      ? { left: '200px', rotate: '300deg', width: '20px', height: '20px' }
      : { left: '-200px', rotate: '0deg', width: '200px', height: '200px' };
    
    $square.animate(animateProps, 500);
  });
});

注意事项 #

• 原CSS中类名squre为拼写错误（正确应为square），虽然不影响功能，但建议修正以避免后续维护混淆。
• animate()中涉及尺寸的属性必须带单位（如20px而非20），否则部分浏览器会解析异常。

内容的提问来源于stack exchange，提问作者H.A Ravindu