Question

我最近尝试实现我的下拉菜单，点击我的按钮来设置“Height：0px;”的动画效果到“高度：260px;”，但是，在加载文档时，即使将溢出设置为隐藏且高度设置为0px，div也可见。

$('.DropBtn a').click(function() {
    if ($(this).attr("href") == "#Open") {
        $(this).attr("href", "#Close");
        $('#Font-Size .DropList').stop().animate({
            height: "260px",
        }, 400);
    } else if ($(this).attr("href") == "#Close") {
        $(this).attr("href", "#Open");
        $('#Font-Size .DropList').stop().animate({
            height: "0px",
        }, 400);
    }
});

以上是我最近添加的脚本，您可以在JSFiddle here上实时查看。

感谢您为解决我的问题提供的任何帮助，

最诚挚的问候，

添

Answer 1

将height设置为0不会隐藏元素。它仍然有margin和padding，导致它被显示。试试这个：http://jsfiddle.net/anw4B/1/

else if ($(this).attr("href") == "#Close") {
        $(this).attr("href", "#Open");
        $('#Font-Size .DropList').stop().animate({
            height: "0px",
        }, 400, function() {$('#Font-Size .DropList').hide()});
    }

我认为这比更改margin和padding更好，因为它允许您定期使用CSS。另请注意，小提琴中还有两个更改（在展开列表之前显示列表并默认将其隐藏在CSS中）。

Answer 2

由于padding和border属性，它可见。

Updated fiddle

在这个小提琴中，我动画padding和height动画，并在动画结束后删除callback属性border函数。我这样做只是为了向你展示问题所在，如果我是你，我宁愿使用一个回调函数来隐藏动画结束时的元素，并在动画运行之前显示它。

Edited fiddle

// This is how the line to show the list would look like.
// Note the .show() before .animate(). 
$('#Font-Size .DropList').stop().show().animate({
    height: "260px",
}, 400);

// That's for hiding. Note the callback function that hides
// the element at the end of the animation
$('#Font-Size .DropList').stop().animate({
     height: "0px",
}, 400,
function () { $(this).hide() });

从技术上讲，这会使元素在到达height: 0时消失，但它仍然有3px填充和2px边框;但在我看来，这是不明显的。亲自尝试一下。

JQuery动画为“Height：0px;”还在显示

2 个答案: