javascript - 如何让 jquery .click() 不隐藏其他 .animate

Question

所以现在，我可以让这个 div 滑到页面上。 我希望能够单击其中一个导航按钮并显示另一个 div。

我是 javascript/jquery 的新手，所以我遇到了一些麻烦。使用此代码，它使我设置动画的第一个 div 消失。

$(document).ready({
  $(".firstDiv").animate({
    "opacity": 1,
    "margin-left": ".01%",
  });

  $("#button").click({
    $(".secondDiv").animate({
      "display": "initial",
      "opacity": 1,
      "margin-left": "3%"
    });
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="mainList">
  <button class="navig" id="button">|GALLERY|</button>
</li>

那么我怎样才能让这段代码工作呢？

Answer 1

如 Taplar 所说，.ready() 和 .click() 处理程序接受匿名函数作为参数，因此它需要像这样:

$(document).ready(function(){
  $(".firstDiv").animate({
    "opacity": 1,
    "margin-left": ".01%",
  });

  $("#button").click(function(){
    $(".secondDiv").animate({
      "display": "initial",
      "opacity": 1,
      "margin-left": "3%"
    });
  })
})

.firstDiv, .secondDiv {
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mainList">
  <button class="navig" id="button">|GALLERY|</button>
</div>
<div class="firstDiv">
  <p>First Div Content Here</p>
</div>
<div class="secondDiv">
  <p>Second Div Content Here</p>
</div>

阅读有关点击事件的 jQuery 文档 here .