How to do an action in jquery wait for another to finish to start?

Question

I am trying to create a menu where the search bar appears only after the li's of the menu vanish, for that, I recommended the function .delay() of jquery, but I am not able to realize these effects, it plays directly the search and removes directly the li's

Jquery

$('#abre-busca').click(function(event){
    event.preventDefault();
    $('#menu-principal-sub li').css({'opacity':0});
    $('#menu-principal-sub li').css({'display':'none'}).delay(500);
    $('#menu-principal-sub form').css({'display':'inline-block'}).delay(500);
    $('#menu-principal-sub form').css({'opacity':1}).delay(500);
})

HTML

<ul id="menu-principal-sub">
    <li><a href="#">Home</a></li>
    <li><a href="#">Quem somos</a></li>
    <li><a href="#">Como participar</a></li>
    <li><href="" id="abre-busca">Busca</a></li><!-- chamada da busca -->
    <form id="barra-busca"><!-- Form de busca -->
        <fieldset>
            <input type="text">
            <button type="submit"></button>
        </fieldset>
    </form>
</ul>

How could it do such an effect ?

Answer 1

You can try using the setTimeout()

$('#abre-busca').click(function(event){
    event.preventDefault();
    $('#menu-principal-sub li').css({'opacity':0});
    $('#menu-principal-sub li').css({'display':'none'})

    setTimeout(function(){
          $('#menu-principal-sub form').css({'display':'inline-block'});
          $('#menu-principal-sub form').css({'opacity':1});
    }, 500);
})