Каков наилучший способ достижения эффекта анимации ({высота}) в jQuery?

Question

Я пытаюсь добиться эффекта анимации в 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>

Answer 1

Вы можете поместить относительного отца с переполнением: скрыто и переместить div изнутри снизу вверх.

edit: И если вы хотите, чтобы анимация начиналась за другой, вы можете использоватьобратный вызов метода 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>

Answer 2

Я думаю, вам стоит попробовать функцию наведения так:

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

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

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

отметьте jsfiddle