幻燈片內部div整個高度上下內外部div

Question

我希望我可以描述得很好，我很抱歉，如果它有點長，但我想描述性。這是我目前正在處理的網站上存在的問題的簡化版本：

我在內部div內有一個外部div - 內部div的高度不是靜態的，有時它的高度是'x'像素，而另一個'y'。外部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