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()功能。祝你好运！

延迟在悬停时显示内联块

3 个答案: