在 jQuery 中实现 animate({height}) 效果的最佳方法是什么？答案

【问题标题】：What is the best way to achieve an animate({height}) effect in jQuery?在 jQuery 中实现 animate({height}) 效果的最佳方法是什么？
【发布时间】：2019-10-18 10:46:24
【问题描述】：

我正在尝试在 jQuery 中实现动画效果，其中我有一个高度为 0px、宽度为 50px 的框。我可以使用animate({height :+50, 200}) 来缩放框（从下到上），但我不能让底部位到达顶部。

编辑：我得到了它的工作见下面的代码：

CSS

.logos, .logosb{    
    position: absolute;
    width:50px;
    height:0px;
    bottom: 600px;

}
.logos{
    background: red;
}

.logosb{
    background: #15181f;
    z-index:1000;
}

和 jQuery

jQuery(document).ready(function(){
  jQuery(".logo").on('mouseover', function(){

    jQuery(".logos").animate({height: +50}, 2000);
    jQuery(".logos").promise().done(function(){
      jQuery(".logosb").animate({height: +50}, 2000);
    })

  });
});

和 HTML：

<li class=logos><li class=logosb></li></li>

【问题讨论】：

标签： jquery html css

【解决方案1】：

你可以用overflow:hidden放置相对父级，并把里面的div从下往上移动。

编辑：如果想让一个动画一个接一个地开始，可以使用 animate 方法的回调。

这是一个例子：

jQuery(document).ready(function(){
  jQuery(".relative").on('mouseover', function(){

    jQuery(".logos").stop().animate({top: 0}, 2000,function() {
       // Animation complete.
        jQuery(".logos").stop().animate({top: -50}, 2000);
    });
    
  });
  
});

.relative {
    width:50px;
    height:50px;
    background: red;
    overflow:hidden;
    position:relative;
}

.logos {
  background: blue; 
  height:100%;
  left:0;
  position:absolute;
  top:-50px;
  width:100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="relative">
  <div class="logos">
  </div>
</div>

【讨论】：

我在想……这不是我想要的结果。我希望盒子从 0px 到 50px（x 到 y），然后从 50px 到 0（y 到 z）。我不想让盒子掉下来，但要往上爬……（实际上）
我编辑了答案，看看是不是你所期望的。
我又改了从上面开始。
使用 jQuery 中的 promise()..done() 和 CSS 中的 z-index:1000 弄清楚了（我在另一个动画上播放了一个动画。当第一个动画完成时，第二个播放在上面）。谢谢你给了我一些想法......
遇到了一个问题...如果我使用 position:absolute;底部：600px；位置可能会在不同分辨率的屏幕上发生变化......知道如何克服这个问题吗？？

【解决方案2】：

我认为你应该尝试这样的悬停功能：

jQuery(document).ready(function(){
  jQuery("#banner-message").hover( function(){

    jQuery(".logos").animate({height: +50}, 2000);
  },
  function(){

    jQuery(".logos").animate({height: -50}, 2000);
  });
});

检查这个jsfiddle

【讨论】：