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; 
}​