为什么我的jQuery效果没有像它那样执行状态？ [英] Why my jQuery effect not performing like it state?

问题描述

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

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

我知道，.hide（）或.slideUp（）函数仅用于隐藏div盒，不删除它们，但是，在我的代码中，为什么其他div盒的位置在DIV .hide（）后发生了变化？它不应该保持原来的位置，因为DIV盒子还在那里，只是HIDED？ $ b

'＃panel1'）。slideUp（1000）.delay（1500）.slideDown（1000）;}）;

  .panel {display：inline-block;宽度：80px;身高：60px;边框：1px纯绿色;位置：相对; top：20px; margin-left：45px; border-radius：5px;}。panelTop {height：30px;背景颜色：蓝色;白颜色; text-align：center;}   
 < script src = https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"> ;</script><div class =panels> < div id =panel1class =panel> < div class =panelTop>＃panel1< / div> < div class =panelBottom>内容< / div> < / DIV> < div id =panel2class =panel> < div class =panelTop>＃panel2< / div> < div class =panelBottom>内容< / div> < / DIV> < div id =panel3class =panel> < div class =panelTop>＃panel3< / div> < div class =panelBottom>内容< / div> < / DIV> < div id =panel4class =panel> < div class =panelTop>＃panel4< / div> < div class =panelBottom>内容< / div> < / div>< / div>  

解决方案 为什么我的jQuery代码不具备动画效果？对于
例如.slideUp（）和.slideDown（），我的代码显示了一些奇怪的
而不是slideUp动画。

.slideUp（）方法为匹配元素的高度生成动画。意味着使动画高度达到0 （或者，如果设置为CSS min-height属性）。请参阅此处以供参考。这正是你的第一个盒子正在发生的事情，它的高度正在下降。
$ b 之后，显示样式属性设置为 none 以确保元素不再影响页面的布局。

什么都不显示？ blockquote>

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

现在对于第二个和第三个问题 h2>

• 
  

  我明白，.hide（）或.slideUp（）函数仅用于隐藏$但是，在我的代码中，为什么
  其他div盒的位置在DIV .hide（）后发生了变化？它不应该保持在
  的原始位置，因为DIV盒子仍然存在，只是HIDED？

  
  

---

• 
  

  如何让其他DIV保持在原始位置b
  
  
  
  
  
  
  $ b

code。.hide（）和 .slideUp（）函数，它们都添加 display：none 添加到您的标记元素。 表示他们现在已经过去



现在您可以做些什么来让他们呆在那里，但隐藏在视野之外？




您可以使用知名度或不透明度 property而不是使用 display
property。






<例如： visibility：hidden; 会将它从视图中隐藏起来。





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



$（document）.ready（function（）{setInterval （function（）{$（'＃panel1'）。slideUp（1000）.delay（500）.slideDown（1000）;}，3000）;}）;

  .outer-div {position：relative;显示：inline-block; min-height：1px; margin-right：15px; margin-left：15px;宽度：130px; height：90px;}。panel {border：1px solid green; margin-left：45px; border-radius：5px;位置：绝对的;顶部：0; width：100％;}。panelTop {height：30px;背景颜色：蓝色;白颜色; text-align：center;}   
 < script src = https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script><div class =panels>< div class =外-DIV> < div id =panel1class =panel> < div class =panelTop>＃panel1< / div> < div class =panelBottom>内容< / div> < / div>< / div>< div class =outer-div> < div id =panel2class =panel> < div class =panelTop>＃panel2< / div> < div class =panelBottom>内容< / div> < / div>< / div>< div class =outer-div> < div id =panel3class =panel> < div class =panelTop>＃panel3< / div> < div class =panelBottom>内容< / div> < / div>< / div>< div class =outer-div> < div id =panel4class =panel> < div class =panelTop>＃panel4< / div> < div class =panelBottom>内容< / div> < / div>< / div>< / div>  

I have 3 questions about my jQuery study today.

1. Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.

2. I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?

3. How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?

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

解决方案

For your first question

• Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.

The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.

Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.

What display none does ?

• display:none means that the tag in question will not appear on the page at all

Now for second and third question

• I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?

---

• How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?

The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now

Now what can you do to let them stay there, But hidden from view ?

You can use visibility or opacity property instead rather than using display property.

For example: visibility: hidden; will just hide it from the view.

Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.

$(document).ready(function() {

  setInterval(function(){ 

    $('#panel1').slideUp(1000).delay(500).slideDown(1000);

  }, 3000);
  
});

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

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

这篇关于为什么我的jQuery效果没有像它那样执行状态？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！