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

Posted 2023-05-08

【中文标题】在外部 div 内上下滑动内部 div 全高

【英文标题】：Slide inner div full height up and down inside outer div

【发布时间】：2014-01-24 15:12:46

【问题描述】：

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

我在外部 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();

但是，无论高度如何，我似乎都无法让它均匀地工作。有什么建议？谢谢。

【参考方案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 上方或下方的任何空间。

就是这样！非常感谢！

快速问题：您将如何做到这一点，以便它从顶部开始，只向下移动然后停止。基本上它是如何在没有循环效果的情况下开始的？

你终于调用了函数runIt，这就是它重复的原因

这实际上是我遇到的另一个问题（现在已解决）但无论如何感谢！