Question

我今天有关于jQuery研究的3个问题。

为什么我的jQuery代码没有应有的动画效果？例如，.slideUp（）和.slideDown（），我的代码显示了一些奇怪的东西而不是slideUp动画。
据我所知，.hide（）或.slideUp（）函数只是隐藏div框，而不是删除它们，但是，在我的代码中，为什么在DIV之后其他div框的位置发生了变化。隐藏（）？它不应该保持原来的位置，因为DIV盒子仍在那里，只是隐藏？
如果隐藏了一个DIV盒子，我怎样才能让其他DIV保持在原来的位置？

$(document).ready(function() {
  $('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});

.panel {
  display: inline-block;
  width: 80px;
  height: 60px;
  border: 1px solid green;
  position: relative;
  top: 20px;
  margin-left: 45px;
  border-radius: 5px;
}
.panelTop {
  height: 30px;
  background-color: blue;
  color: white;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="panels">
  
  <div id="panel1" class="panel">
    <div class="panelTop">#panel1</div>
    <div class="panelBottom">content</div>
  </div>

  <div id="panel2" class="panel">
    <div class="panelTop">#panel2</div>
    <div class="panelBottom">content</div>
  </div>

  <div id="panel3" class="panel">
    <div class="panelTop">#panel3</div>
    <div class="panelBottom">content</div>
  </div>

  <div id="panel4" class="panel">
    <div class="panelTop">#panel4</div>
    <div class="panelBottom">content</div>
  </div>

</div>

Answer 1

第一个问题

为什么我的jQuery代码没有应有的动画效果？对于例如，.slideUp（）和.slideDown（），我的代码显示了一些奇怪的东西而不是slideUp动画。

.slideUp()方法可以设置匹配元素的高度。意味着它动画高度，因此它达到0 （或者，如果设置，则为CSS min-height属性）。请参阅here以供参考。这正是你的第一个盒子发生了正在减少的高度。

之后，display样式属性设置为none，以确保该元素不再影响页面布局。

没有显示什么？

display:none表示相关的标记不会出现在页面完全

现在提出第二和第三个问题

据我所知，.hide（）或.slideUp（）函数只是为了隐藏 div框，不是删除它们，但是，在我的代码中，为什么这个位置在DIV .hide（）之后其他div框改变了吗？不应该留下来他们作为DIV盒子的原始位置仍在那里，只是隐藏？

如何让其他DIV保持在原来的位置，当一个DIV盒被隐藏？

.hide()和.slideUp()功能会将display:none添加到您的标记元素中。 意味着他们现在不见了

现在你能做些什么来让他们留在那里，但隐藏在视线之外？

您可以使用visibility或opacity属性，而不是使用display 属性。

例如：visibility: hidden;只会将其隐藏在视图中。

会更新你的小提琴，以便在一段时间内展示它。希望这会帮助你。如果不清楚，请随时询问。谢谢。

＆＃13;

$(document).ready(function() {

  setInterval(function(){ 

    $('#panel1').slideUp(1000).delay(500).slideDown(1000);

  }, 3000);
  
});

＆＃13;

.outer-div
{
    position: relative;
    display: inline-block;
    min-height: 1px;
    margin-right: 15px;
    margin-left: 15px;
    width: 130px;
    height: 90px;
}
.panel {
  border: 1px solid green;
  margin-left: 45px;
  border-radius: 5px;
  position:absolute;
  top:0;
  width: 100%;
}
.panelTop {
  height: 30px;
  background-color: blue;
  color: white;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>


<div class="panels">
<div class="outer-div">
  <div id="panel1" class="panel">
    <div class="panelTop">#panel1</div>
    <div class="panelBottom">content</div>
  </div>
</div>
<div class="outer-div">
  <div id="panel2" class="panel">
    <div class="panelTop">#panel2</div>
    <div class="panelBottom">content</div>
  </div>
</div>
<div class="outer-div">
  <div id="panel3" class="panel">
    <div class="panelTop">#panel3</div>
    <div class="panelBottom">content</div>
  </div>
</div>
<div class="outer-div">
  <div id="panel4" class="panel">
    <div class="panelTop">#panel4</div>
    <div class="panelBottom">content</div>
  </div>
</div>
</div>

＆＃13;

Answer 2

您应该使用display:flex .panels来解决您的第一个问题。

对于第二个问题，您应该使用visibility或opacity 使用当前代码，您将删除它，虽然它被称为hide()，它等同于CSS display:none;，它不会保留元素的空间。

虽然你实际上并不需要在你的情况下设置visibility，因为向上滑动会隐藏元素和向下显示。

这样的事情：

$('#panel1').animate({
  top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
  top: 0
}, 1000);

你还需要改变一点CSS 将其添加到您的CSS：

.panels {
  display: flex;
  overflow: hidden;
  margin-top: 20px;
}

从.panel移除top: 20px;

完整示例在这里https://jsfiddle.net/_jakob/cphptby3/1/

为什么我的jQuery效果不像它状态那样表现？

2 个答案:

现在提出第二和第三个问题