javascript - JQuery Cycle Plugin - 可变/调整高度

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-transition 魔术来做到这一点：

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