Попытка выгрузить анимацию, используя jQuery. Является ли end () лучшим способом?

Question

Редактировать 3

Получилось! Добавленная позиция: липкая;z-индекс: 2;и все получилось хорошо.

.logo{
    display: block;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    left: 0;
    margin:auto;
    transform: translateY(50%);
    position: sticky;
    z-index: 2;
    }

---

Edit 2 : Итак, я попробовал несколько вещей и придумал это, что работает так, как я этого хочу:

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

    jQuery(".logos").animate({height: +900}, 500);
    jQuery(".logos").promise().done(function(){
      jQuery(".logos").delay(4000).hide(1000)
      jQuery(".logosb").animate({height: +900}, 500)
    });

  });
});

и html:

<header>
  <div class=logos>
       <div class=logosb>

        </div>
     </div>
     <div class="logo">
        <img src="logo_large.png" width=246px height=58px />
      </div>
    </header>

и CSS

.logo{
    display: block;
    text-align: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    left: 0;
    margin:auto;
    transform: translateY(50%);
    }

.logos, .logosb{    
    position: absolute;
    width:100vw;
    margin:0 auto;
    height:0vh;
    bottom: 0;

}
.logos{
    background: white
}

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

У меня сейчас проблема в том, что логотип скрывается анимацией. Кто-нибудь знает, как это исправить?

---

Редактировать : Извините за повторную публикацию (возникла проблема с другим сообщением). У меня есть анимация (в jQuery), в которой два объекта скользят друг над другом, и я хочу выгрузить объект после завершения анимации (я хочу, чтобы объект был скрыт от просмотра после завершения анимации). Является ли использование функции .end() лучшим способом?

Вот мой код:

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

    jQuery(".logos").animate({height: +1000}, 300);
    jQuery(".logos").promise().done(function(){
      jQuery(".logosb").animate({height: +1000}, 100);
    })

  });
});

Кто-нибудь знает как?