Javascript-JQuery When

Guys I am making a menu bar but I have been stuck in animating or moving it. These are my reletant codes:

    function navbar(){ 
    document.getElementById("a").style.marginLeft = "50%";
    .
    .
    .
    function navbar2(){
     document.getElementById("a").style.marginTop = "-100px";
    }
    $(document).ready(function(){
        $("#a").click(function(){
           navbar();
       var x = $('#a');  
$.when(x.css("margin-left")=="50%").done(function(){
            navbar2();
       });
      });
    });

I want my navbar icon to first move margin-left = 50%; and after this when my icon reaches margin-left 50%, move icon to top. But now when I click on icon it starts to go top and right at same time. But I want my icon to first go right then go top.

Can someone please help?

You can do it like this with jQuery, without requiring navbar() and navbar2() :

$("#a").click(function() {
  $(this).animate({
      margin-left: "50%"
    }, "slow")
    .animate({
      margin-top: "-100px"
    }, "slow");
});