Question

我正在尝试设计一个小菜单，我真的很喜欢这段代码。正如您通常所知，第一次加载页面时菜单是关闭的。首次加载页面时如何关闭此动画？如何反向启动此动画？

$(document).ready(function(){
        $(".slide-toggle").click(function(){
            $(".box").animate({
                width: "toggle"
            });
        });
    });

.box{
        float:left;
        overflow: hidden;
        background: #f0e68c;
    }
    /* Add padding and border to inner content
    for better animation effect */
    .box-inner{
        width: 400px;
        padding: 10px;
        border: 1px solid #a29415;
    }

<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<body>
    <button type="button" class="slide-toggle">Slide Toggle</button>
    <hr>
    <div class="box">
        <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
    </div>
</body>
<html>

Answer 1

您可以通过添加 .box 来从隐藏的 display: none 开始：

$(document).ready(function() {
  $(".slide-toggle").click(function() {
    $(".box").animate({
      width: "toggle"
    });
  });
});

.box {
  float: left;
  overflow: hidden;
  background: #f0e68c;
  display: none;
}


/* Add padding and border to inner content
    for better animation effect */

.box-inner {
  width: 400px;
  padding: 10px;
  border: 1px solid #a29415;
}

<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<body>
  <button type="button" class="slide-toggle">Slide Toggle</button>
  <hr>
  <div class="box">
    <div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse
      varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam
      ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</div>
  </div>
</body>
<html>

Answer 2

<div class="box" style="display:none">

当菜单关闭时，它会向 .box 元素添加 display: none 属性。您必须将此样式属性添加到 HTML 中的 .box 元素，以使其在启动时看起来像是被困住了。

jQuery 动画如何从头开始？

2 个答案: