javascript - Jquery 向上滑动问题

Question

好的，下面代码的目标是让左上角向下滑动，让右下角向上滑动。

$(document).ready(function() {
  $("#slider").click(function() {
    /*LEFT-SIDE*/
    $("#top-left").slideDown(2000);
    $("#main-left").slideUp(7000);
    /*RIGHT SIDE*/
    $("#main-right").slideDown(2000);
    $("#bottom-right").slideUp(2000);
  });
});

body {
  background-color: gray;
  margin: 0px;
  margin-top: -15px;
  /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
  display: none;
  float: left;
  width: 50%;
  background-color: green;
  padding-bottom: 100%;
  z-index: 1000;
}
#bottom-right {
  display: none;
  background-color: gray;
  padding-bottom: 100%;
  z-index: 1000;
}
#main-left {
  padding-top: 50px;
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: blue;
  z-index: -10;
}
#main-right {
  float: right;
  background-color: red;
  width: 50%;
  padding-bottom: 100%;
  z-index: -10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
  <section id="top-left">
    <p>Hidden Content</p>
  </section>

  <section id="main-left">
    <p>Main Content</p>
    <button id="slider">Press Me!</button>
  </section>

</section>
<section id="complete-right-side">
  <section id="bottom-right">
    <p>More hidden Content</p>
  </section>

  <section id="main-right">
    <p>Side Content</p>
  </section>
</section>

问题是无论何时按下按钮，右下部分都不会按预期向上滑动。

提前感谢任何回答或评论此问题的人:)

Answer 1

您应该按照以下方式在 Jquery 中进行更改。因为 slideUp 会隐藏 div 而你试图显示 div。

并将 css 应用到 float: right;宽度:50%； 到 #bottom-right

<section id="main-right">
    <p>Side Content</p>
  </section>
  <section id="bottom-right">
    <p>More hidden Content</p>
  </section>

并且还要像上面那样改变顺序，因为右下角的 div 从主 div 的底部滑动。

$(document).ready(function() {
  $("#slider").click(function() {
    /*LEFT-SIDE*/
    $("#top-left").slideDown(2000);
    $("#main-left").slideUp(7000);
    /*RIGHT SIDE*/
    $("#main-right").slideUp(2500);  //Here
    $("#bottom-right").slideDown(2500); //Here
  }); 
});

body {
  background-color: gray;
  margin: 0px;
  margin-top: -15px;
  /*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
  display: none;
  float: left;
  width: 50%;
  background-color: green;
  padding-bottom: 100%;
  z-index: 1000;
}
#bottom-right {
  display: none;
  background-color: gray;
  z-index: 1000;
  float: right;
  width: 50%;
}
#main-left {
  padding-top: 50px;
  position: fixed;
  width: 50%;
  height: 100%;
  background-color: blue;
  z-index: -10;
}
#main-right {
  float: right;
  background-color: red;
  width: 50%;
  padding-bottom: 100%;
  z-index: -10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
  <section id="top-left">
    <p>Hidden Content</p>
  </section>

  <section id="main-left">
    <p>Main Content</p>
    <button id="slider">Press Me!</button>
  </section>

</section>
<section id="complete-right-side">
  

  <section id="main-right">
    <p>Side Content</p>
  </section>
  <section id="bottom-right">
    <p>More hidden Content</p>
  </section>
</section>