显示：内联不适用于 jquery animate()

Question

我正在尝试将鼠标悬停在网站标题上时默认隐藏的 div 动画，这里是当前不起作用的 jquery 代码：

    $("#header_title").mouseenter(function() {
        $('#header_links').animate({
            display: "inline",
            width: "600px"
            }, 1500 );
    });

    $("#header").mouseleave(function() {
        $('#header_links').css({
            display: "none",
            }, 1500 );
    });

当我将动画更改为 css 时它工作正常，但是我不希望菜单只出现，我希望它在隐藏后进行动画处理。有什么建议吗？

Answer 1

您忘记将其动画回零宽度，并且您无法动画显示属性，无论是否可见，中间没有任何动画，因为它不是数字属性？

$("#header_title").mouseenter(function() {
    $('#header_links').css('display','inline').animate({
        opacity: 1,
        width: 600
    }, 1500 );
});

$("#header").mouseleave(function() {
    $('#header_links').animate({
        opacity: 0,
        width: 0
    }, 1500, function() {
        $(this).css('display','none');
    });
});