jQueryUI：子动画上的动画父元素高度

发布于 2024-10-15 17:18:03 字数 250 浏览 1 评论 0原文

当我使用 jQuery UI .hide('slide', {direction:'up'}) 动画隐藏子元素时，我也想为其父元素的高度设置动画。

这里是我所拥有的示例。动画看起来不太好，因为父级的高度在其子级被隐藏后立即更改，而不是像 jQuery .slideUp() 动画那样在一个过程中更改。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风和你 2024-10-22 17:18:03

我很快改变了你的 CSS，如下所示，它看起来很不错。稍微搞一下，它看起来应该和你想要的一模一样。

#container{
    width:100px;
    padding:10px;
    text-align:center;
    height:auto;
}

#child{
    background-color:blue;
    border:10px solid #red;
    border-top:0px;
}

#content{
    background-color:red;
}

I quickly changed up your CSS as follows and it looks pretty good. A bit of fooling around and it should look exactly like what you want.

#container{
    width:100px;
    padding:10px;
    text-align:center;
    height:auto;
}

#child{
    background-color:blue;
    border:10px solid #red;
    border-top:0px;
}

#content{
    background-color:red;
}

回复收藏 0 原文

静水深流 2024-10-22 17:18:03

更新：一些调整:)测试：http://jsfiddle.net/inti /BG4Hk/16/

尝试这样的事情：

var original_height = 0;

$('#child').click(function() {
    if (!original_height) {
        original_height = $(this).height();
    }
    $(this).stop().animate({'height': 0}, 1000, function() { $(this).hide(); });
});

$('#content').click(function() {
    if (original_height) {
        $('#child').stop().show().animate({'height': original_height}, 1000);
    }
});

它需要更多的工作来处理未解决的问题，但这是一个开始。

UPDATE: some tweaks :) Tested: http://jsfiddle.net/inti/BG4Hk/16/

Try something like this:

var original_height = 0;

$('#child').click(function() {
    if (!original_height) {
        original_height = $(this).height();
    }
    $(this).stop().animate({'height': 0}, 1000, function() { $(this).hide(); });
});

$('#content').click(function() {
    if (original_height) {
        $('#child').stop().show().animate({'height': original_height}, 1000);
    }
});

It needs a bit more work, to handle loose ends, but it's a start.

回复收藏 0 原文

~没有更多了~