jQuery css call back function

Question

I'm trying to expand my searchbar using jQuery. Also I want to hide the nav links.

I have some jQuery code like this. This code works fine when focus.

$(".searchBox input").focus(function(){
    $("#navlinks").css('display','none');
   $(this).css({'width':'200px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
});

 $(".searchBox input").focus(function(){
       $(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
$("#navlinks").css('display','block');
    });

The second function also works fine except it display the content before animation complete.

So I want $("#navlinks").css('display','block'); to be exectuted only when animate complete.

Can anyone tell me how?

Thanks

Answer 1

.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)

Answer 2

Since you know how long takes your animations, why do not use setTimeout() after CSS change? As far as I see your animation takes about 0.5 seconds. You could easily execute your "callback" seamlessly at end of your animation specifying the same amount of time in milliseconds.

 $(".searchBox input").focus(function(){
       $(this).css({'width':'100px','-moz-transition':'width 0.5s ease-out','-webkit-transition':'width 0.5s ease-out','transition':'width 0.5s ease-out'});
       setTimeout( function() {
            $("#navlinks").css('display','block');
       }, 500);
  });

Answer 3

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/