Display: inline不能与jquery animate()一起工作

Question

我正在尝试创建一个div，该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');
    });
});