Question

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

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

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

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

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

1 个答案: