选择带空格的父高度：nowrap

Question

所以我有这些 DIV，我安排它们在父级内部左右滑动。

查看以下 JSFiddle 以了解设计：

http://jsfiddle.net/StevP/C9WL7/

您可以看到，通过将第一个子 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) 它将这些孩子重置为动画开始时的自动高度，以便它们在过渡期间可见。我只能说“糟糕”，但它确实有效。

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/