jQuery css回调函数

Question

我正在尝试使用jQuery扩展我的搜索栏.我也想隐藏导航链接.

我有一些像这样的jQuery代码.这个代码在焦点时工作正常.

$(".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');
    });

第二个功能也很好 except it display the content before animation complete.

所以我只想$("#navlinks").css('display','block');在完成动画时才能被激活.

谁能告诉我怎么样？

谢谢

Answer 1

.css()没有回调函数,但.animate()没有.只需将时间设置为0并使用动画.

$(".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'});
   });
});

编辑:包括延迟,这是必需的.(谢谢eicto)

Answer 2

既然你知道你的动画花了多长时间,为什么不改变CSS后使用setTimeout()？据我所知,你的动画需要大约0.5秒.您可以在动画结束时无缝地执行"回调",指定相同的时间量(以毫秒为单位).

 $(".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);
  });