Question

我目前正在做一个学校项目，我需要为其建立一个网站。对于这个网站，我希望第一个div向上滑动并隐藏，之后第二个div向上滑动并显示。我已经花了几个小时在网上寻找信息，但是找不到可行的解决方案或只能部分解决问题的解决方案。

这是我目前拥有的代码：

$(document).ready(function() {
  $("#next1").click(function() {
    $("#1").slideUp("slow", function() {
      $("#2").slideDown("slow");
    });
  });
});

$(document).ready(function() {
  $("#next2").click(function() {
    $("#2").slideUp("slow", function() {
      $("#1").slideDown("slow");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css" rel="stylesheet" />


<body>
  <div class="jumbotron">
    <h1 style="text-align:center">Project Pie</h1>
  </div>
  <div id="1">


    <div class="row row-eq-height">
      <div class="col-md-1" style="background-color:hotpink; border: none;">
        <p>Lorem, ipsum dolor.</p>
      </div>
      <div class="col-md-10" style="background-color:white; border: none">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, est.</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias, error?</p>
        <br>
        <div class="form-group">
          <label>Number People:</label>
          <input type="number">
        </div>
        <br>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis, corporis?</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id, itaque?</p>
        <br>
        <div class="form-group">
          <label>Number layers:</label>
          <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </div>
      </div>
      <div class="col-md-1" style="background-color:hotpink; border: none">
        <p>Lorem, ipsum dolor.</p>
      </div>
    </div>
    <button id="next1">next</button>
  </div>

  <div id="2" style="display:none;">


    <div class="row row-eq-height">
      <div class="col-md-1" style="background-color:gold; border: none">
        <p>Lorem, ipsum dolor.</p>
      </div>
      <div class="col-md-10" style="background-color:white; border:none">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, est.</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias, error?</p>
        <br>
        <div class="form-group">
          <label>Number People:</label>
          <input type="number">
        </div>
        <br>
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officiis, corporis?</p>
        <br>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Id, itaque?</p>
        <br>
        <div class="form-group">
          <label>Number Layers:</label>
          <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
          </select>
        </div>
      </div>
      <div class="col-md-1" style="background-color:gold; border: none;">
        <p>Lorem, ipsum dolor.</p>
      </div>
    </div>
    <button id="next2">next</button>
  </div>
</body>

我希望有人能帮助我找到可行的解决方案。

Answer 1

我想我理解，这段代码应该可以解决问题：

function slideUp(elementId) {
  var div = $(elementId);
  var height = div.css({
    display: "block"
  }).height();

  div.css({
    overflow: "hidden",
    marginTop: height,
    height: 0
  }).animate({
    marginTop: 0,
    height: height
  }, 500, function() {
    $(this).css({
      display: "",
      overflow: "",
      height: "",
      marginTop: ""
    });
  });
};

$(document).ready(function() {
  $("#next1").click(function() {
    $("#1").slideUp("slow", function() {
      slideUp("#2");
    });
  });
});

$(document).ready(function() {
  $("#next2").click(function() {
    $("#2").slideUp("slow", function() {
      slideUp("#1");
    });
  });
});

Answer 2

slideUp -通过滑动隐藏匹配的元素。

slideDown -通过滑动显示匹配的元素。

所以ALTER PROCEDURE [dbo].[RATIO] @DATED nvarchar(30),@DATEF nvarchar(30), @REG nvarchar(30) AS DECLARE @DATED_Date DATE = @DATED; DECLARE @DATEF_Date DATE = @DATEF; SELECT [REGION] = ET_REGION, [MAGASIN] = ET2.ET_LIBELLE , COUNT(DISTINCT CASE WHEN GP_TOTALTTC < 200 THEN GL_NUMERO END) AS 'S : <200' FROM GCLIGNEARTDIM LEFT OUTER JOIN ETABLISS ET2 ON GL_ETABLISSEMENT=ET2.ET_ETABLISSEMENT WHERE CAST(GL_DATEPIECE AS DATE) BETWEEN @DATED_Date AND @DATEF_Date GROUP BY ET_REGION, ET2.ET_LIBELLE不能播放。 slideUp可用于实现此效果。

animate()

$(document).ready(function() {
  $("#next1").click(function() {
    $("#1").slideUp("slow", function() {
      slideUp($("#2"));
    });
  });

  $("#next2").click(function() {
    $("#2").slideUp("slow", function() {
      slideUp($("#1"));
    });
  });
});

function slideUp($ele) {
  var height = $ele.height() + 'px';
  $ele.css({
    'margin-top': height,
    'height': height,
    'overflow': 'hide'
  }).show().animate({
    'marginTop': '0px',
    'height': 'unset',
    'overflow': 'unset'
  }, 400);
}

如何使用jQuery向上滑动以隐藏和显示div？

2 个答案: