在内部div内上下滑动内部div全高

Question

我希望我能够很好地描述这一点，如果它有点长，我道歉但我想描述一下。 这是我正在处理的网站上的问题的简化版本：

我在内部div中有一个内部div-内部div的高度不是静态的，有时它的高度是'x'像素，而另一个'y'。 外部div是一个带溢出的固定高度：隐藏内部div的重叠，在所有情况下，内部div的高度大于外部div。

我的问题是我需要设置内部div的动画来上下滑动内部div的整个高度，以便所有它都显示在外部div中。 你可以看到我尝试在这里使用百分比的动画（33％是任意的）：

http://jsfiddle.net/FLMp8/301/

var stuff = $('#inner1, #inner2');

function runIt() {
    stuff.animate({
        top: '-=33%'
    }, 3000);
    stuff.animate({
        top: '+=33%'
    }, 3000, runIt);
}

runIt();

然而，无论高度如何，我似乎无法使其均匀地工作。 有什么建议？ 谢谢。

Answer 1

试试这个，

var stuff = $('#inner1, #inner2');

function runIt() {
    stuff.each(function() {
        $(this).animate({
            top: '0'
        }, 3000);
    });
    stuff.each(function() {
        $(this).animate({
            top: -$(this).height() + $(this).parent('div').height()
        }, 3000, runIt);
    });
}

runIt();

小提琴

您可以按如下方式简化此代码

var stuff = $('#inner1, #inner2');

function runIt() {
    stuff.each(function() {
        var $this = $(this);
        $this.animate({
            top: '0'
        }, 3000).animate({
            top: -$this.height() + $this.parent('div').height()
        }, 3000, runIt);
    });
}

runIt();

小提琴