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

display：inline不适用于jquery animate（）

1 个答案: