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

Question

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

我在外部 div 中有一个内部 div - 内部 div 的高度不是静态的，有时它的高度是“x”像素，而另一个“y”像素。外部 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();

FIDDLE

您可以将这段代码简化如下

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();

FIDDLE