jquery - 悬停时延迟显示内联块

Question

我有一个正在制作动画的导航。但是文本会跳转，因为它在动画完成之前显示，所以我想300ms在触发display:inline-block. 我不能让它工作？有任何想法吗？

$(".left-navigation ul li").hover(function(){
    $(this).stop().animate({'width': '100%'}, 200);
    $(this).find("span.nav-text").delay(300).css("display", "inline-block");
}, function(){
    $(this).stop().animate({'width': '35px'}, 200);
    $(this).find("span.nav-text").css("display", "none");
});

Answer 1

使用回调！

 $(this).stop().animate({'width': '100%'}, 200, function(){
   // set your object visible here
});

Answer 2

animate有一个回调参数，将在动画完成后执行。尝试这个：

$(".left-navigation ul li").hover(function(){
    $(this).stop().animate({'width': '100%'}, 200, function() {
        $(this).find("span.nav-text").delay(300).css("display", "inline-block");
    });
}, function(){
    $(this).stop().animate({'width': '35px'}, 200, function() {
        $(this).find("span.nav-text").css("display", "none");
    });
});

Answer 3

您正在寻找.setTimeout()函数。祝你好运！