How to do an action in jquery expect another one to finish to start?

Navigation
0

I'm trying to create a menu where the search bar appears only after the li's of the menu are gone, for that, they recommended me the .delay() function of jquery , but I'm not able to achieve these effects, directly search and directly remove 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 you do such an effect?

    
asked by anonymous 24.01.2017 / 14:42

1 answer

1

You can try using 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);
})
    
24.01.2017 / 14:54
Disable submit button after validating empty field using jquery Carousel bootstrap one inside the other does not work right