javascript - 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');
    });

第二个函数也可以正常工作除了它在动画完成之前显示内容。

所以我希望 $("#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)