页面加载时自动滑入div并实现点击切换滑入滑出（jQuery）

问题描述 #

我是jQuery/Javascript新手，正卡在点击切换动画的最后一步。需求是：页面加载时让一个div自动滑入，之后点击按钮能控制它在屏幕内外滑入滑出。目前已实现页面加载时的滑入效果，以及首次点击按钮时的滑出效果，但无法实现来回切换功能，第二次点击需恢复至页面加载时的滑入状态。尝试过的部分方案要么使按钮标签完全移出视野，要么无法正常工作。

原有代码参考 #

HTML

<div class="slide-out">
      <div class="slide-out-tab">
        <div>
          <p>QUIZ NIGHT</p>
        </div>
      </div>
      <div class="slide-out-content">
        <div class="slide-title"> 
          <h3>QUIZ NIGHT<br>£100 prize pot <br>Tuesdays <br>7pm - 9pm</h3>
          <a href="#">Book Now</a>
        </div>
      </div>
    </div>

原有CSS

.slide-out {
  background-color: #000;
  color:#fff;
  position: fixed;
  width: 300px;
  top: 90%;
  transform: translateY(-90%);
  right: -300px;
  min-height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
}

.slide-out-tab {
  background-color: #E84E1C;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  height: 100%;
  left: -40px;
  position: absolute;
  width: 40px;
}

.slide-out-tab div {
  text-align: center;
  position: relative;
  right: 75px;
  top: 90px;
  color: #fff;
  padding: 1px 5px;
  width: 180px;
  transform: rotate(270deg);
  writing-mode: lr-tb;
}

.slide-out-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

解决方案 #

方案1：通过状态变量控制动画方向 #

核心思路：用变量记录当前滑入/滑出状态，点击时根据状态执行对应动画并切换状态

修改后的jQuery代码：

$(window).on("load", function() {
  // 标记当前状态：true为滑入，false为滑出
  let isSlidIn = true;
  // 页面加载完成后自动滑入
  $(".slide-out").animate({ "right": "0px" }, "slow" );
  
  $(".slide-out-tab").click(function () {
    if (isSlidIn) {
      // 当前是滑入状态，点击执行滑出
      $(".slide-out").animate({ "right": "-300px" }, "slow" );
    } else {
      // 当前是滑出状态，点击执行滑入
      $(".slide-out").animate({ "right": "0px" }, "slow" );
    }
    // 切换状态标记
    isSlidIn = !isSlidIn;
  }); 
});

方案2：CSS类切换+过渡动画（更简洁高效） #

核心思路：把动画逻辑交给CSS过渡实现，JS只负责切换类名，代码更易维护，动画更流畅

调整后的CSS（添加过渡效果和状态类）

.slide-out {
  background-color: #000;
  color:#fff;
  position: fixed;
  width: 300px;
  top: 90%;
  transform: translateY(-90%);
  right: -300px;
  min-height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5000;
  /* 添加过渡动画，替代jQuery animate */
  transition: right 0.6s ease;
}

/* 滑入状态的类 */
.slide-out.slid-in {
  right: 0;
}

.slide-out-tab {
  background-color: #E84E1C;
  border-radius: 4px 0 0 4px;
  cursor: pointer;
  height: 100%;
  left: -40px;
  position: absolute;
  width: 40px;
}

.slide-out-tab div {
  text-align: center;
  position: relative;
  right: 75px;
  top: 90px;
  color: #fff;
  padding: 1px 5px;
  width: 180px;
  transform: rotate(270deg);
  writing-mode: lr-tb;
}

.slide-out-content {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

修改后的jQuery代码

$(window).on("load", function() {
  // 页面加载完成后添加滑入类
  $(".slide-out").addClass("slid-in");
  
  $(".slide-out-tab").click(function () {
    // 切换滑入/滑出状态类
    $(".slide-out").toggleClass("slid-in");
  }); 
});

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