JQuery循環插件 - 變量/調整高度

Question

我一直在嘗試重新創建類似於http://www.brianrea.com/Progress-drawings上使用的循環插件。

我基本上需要分頁，並要求容器根據圖像的高度調整其高度，並使用平滑的動畫。寬度是靜態的。

嘗試查看插件的文檔，但它不是非常具體，沒有演示（我可以找到）在這個功能。

任何人都可以指向正確的方向嗎？

我得在像此刻的東西：

$('#feature').cycle({ 
    fx:  'scrollHorz', 
    prev: '#previous', 
    next: '#next', 
    width: 660, 
    after: onAfter, 
    timeout: 0 
}); 

function onAfter(curr, next, opts) { 
    var index = opts.currSlide; 
    $('#previous')[index == 0 ? 'hide' : 'show'](); 
    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show'](); 
} 

Answer 1

我認爲你可以做到這一點與before回調函數和少量CSS過渡魔法：

http://jsfiddle.net/vPJCv/2/

HTML

<a href="#" id="prev">&larr;</a> 
<a href="#" id="next">&rarr;</a> 

<div id="slideshow"> 
<img src="http://flickholdr.com/500/200/sea,sun/1"> 
<img src="http://flickholdr.com/500/400/sea,sun/2"> 
<img src="http://flickholdr.com/500/500/sea,sun/3"> 
<img src="http://flickholdr.com/500/300/sea,sun/4"> 
<img src="http://flickholdr.com/500/400/sea,sun/5"> 
</div>​ 

個

JS

$(document).ready(function(){ 

    $('#slideshow').cycle({ 
     before : function(currSlideElement, nextSlideElement){ 
      $('#slideshow').css('height', $(nextSlideElement).height()+'px'); 
     }, 
     timeout : 0, 
     prev : $('a#prev'), 
     next : $('a#next') 
    }); 

}); 

CSS

#slideshow{ 
    border-bottom: 2px solid #000; 
    padding: 10px; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
      transition: all .2s ease; 
}​