Jquery Sliding Up问题

Question

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

＆＃13;

＆＃13;

$(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);
  });
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

提前感谢您对此问题的回答或评论：）

Answer 1

您需要更改给定的时间间隔

喜欢

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

结帐Demo

Answer 2

更改你的功能

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

https://jsfiddle.net/xbr1xcxh/4/

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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: 2000;
}
#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请检查。我认为这就是你要找的东西。

Answer 4

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

将css应用于float: right; width: 50%;至#bottom-right

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

并且还改变了上面的顺序，因为右下方div从主div的底部滑动。

＆＃13;

＆＃13;

$(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
  }); 
});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;