Question

所以我有这些DIV，我已经安排在父母的右边向左滑动。

请参阅以下JSFiddle以查看设计：

你可以看到，通过将第一个子DIV的左边距调整为-100％的倍数，可以非常简单地将DIV正确地水平放置在父级内。因此，它很容易制作动画。

现在，这让我想到了我的问题。我使用jQuery左右移动它们。它很棒。但是，我想选择父母从哪个孩子中获得高度。

我知道，我可以添加......

    $('#parent').height($('.child:eq()').outerHeight());

......我现在正在做的事情。但是，孩子们的内容可能会发生变化，导致他们调整大小（通过动画制作），因此会被切断。因此，设定高度是不可能的。

我需要使用height：auto;在父母身上并以某种方式使其忽略特定儿童的高度。我不能为我的生活想办法。

我不想使用计时器，并且onresize / .resize（）似乎无法使用我的Chrome。

Answer 1

您可以使用jQuery监视DOM子树并在回调中调整父div的高度，如下所示：

$('.content').bind('DOMSubtreeModified', function(e) {
    if (e.target.innerHTML.length > 0) {
        $(".parent").height($(".content").height());
    }
});

这是一个有效的jsfiddle：http://jsfiddle.net/9386d/

解释dom子树的问题：jQuery watch for domElement changes?

bind（）的jQuery文档：http://api.jquery.com/bind/

Answer 2

嗯...说实话，我不再是jQuery的忠实粉丝，所以我觉得这个答案很糟糕。它只是感觉非常低效，但这里有一个解决方案可以做三件事：1）它调整容器在step上的高度，并使用CSS transition属性用于眼睛糖果（没有）也可以。 2）它将除当前孩子之外的所有孩子的孩子身高设置为0并使用overflow:hidden，这样他们就不会再影响文档的流程。 3）它会在动画开始时将这些孩子重置为自动高度，以便在过渡期间可见。我只能说＆＃34; yuck＆＃34;，但确实有效。

CSS

.child{
       ...
       overflow:hidden;
}

的jQuery

var animation_prefs = {
    duration: 3000,
    start: function() {
        $('.child').height('auto');
    },
    step: function(now) {
        var current_index = (Math.floor((now + 50) / 100) * -1);
        $('#parent').height($('.child:eq(' + current_index + ')').outerHeight());
        $('#parent').data('current', current_index);
    },
    complete: function() {
        $('#parent').height('auto');
        $('.child:not(:eq('+$('#parent').data('current')+'))').height(0);
    }
}

$('.child:eq(0)').animate(
    {
        marginLeft:'-200%' //~ Move it back 2 children
    },
    animation_prefs
).animate(
    {
        marginLeft:'-100%' //~ Move it back 1 child
    },
    animation_prefs
).animate(
    {
        marginLeft:'-200%' //~ Move it back 2 children again
    },
    animation_prefs
);

演示

http://jsfiddle.net/Gq4xs/show

来源

http://jsfiddle.net/Gq4xs/

选择父高度使用空格：nowrap

2 个答案:

CSS

的jQuery

演示

来源