jQuery css call back function

.css() doesn't have a callback function, but .animate() does. Just set the time to 0 and use animate.

$(".searchBox input").on('focus',function(){
   $(this).animate({width:100,mozTransition:'width 500ms ease-out',webkitTransition:'width 500ms ease-out',transition:'width 500ms ease-out'},0,function(){
       $("#navlinks")
            .delay(500)
            .css({display:'block'});
   });
});

Edit: included delay, which is required. (Thanks eicto)

I would recommend using .animate() like

$(".searchBox input").focus(function(){
    $(this).animate({
        'width': '100px'       
    }, 500, function() {
        $("#navlinks").css('display', 'block');
    });
});

This will work on all browsers, and the navlinks command will be insured to begin after the animation is complete. Note: the 500 is the number of milliseconds the animation will take to complete, so you can adjust accordingly.

Here is the .animate() documentation: http://api.jquery.com/animate/

I came along here, but I used another solution:

$('.something').one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",
    function(event) {
        // Do something when the transition ends

 });

As you see, this is doing something, when the transition has ended.

This is described here: http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

Greetings,
Lars

Here is described transitionend event, let's try that:

CSS:

#test {
    width: 100px;
    border: 1px solid black;
    -webkit-transition: all 1s;
    -moz-transition all 1s;
    transition all 1s;
}
#test.wide {
    width: 200px;

}

JS:

var test = $('#test');
 test.bind('transitionend webkitTransitionEnd oTransitionEnd', function () {
        $('body').append('<div>END!</div>');
    })
$('button').click(function () {
    test.toggleClass('wide');
});

DEMO