JQuery语法帮助滑块根据自动高度移动DIVS

Question

我使用一个简单的 jquery 来旋转图像（淡入淡出）并为每个图像设置自动高度（我想我在下面得到了）。

是否可以根据图像高度更改 #top-left div 的高度，并将其下方的 DIV 向上移动。是否有某种淡入淡出功能可以将下方的 div 向上或向下移动？

<div id="top-left">
<div class="slides">
    <img src="img/home-n1.jpg">
    <img src="img/home-n2.jpg">
    <img src="img/home-n3.jpg">
    <img src="img/home-n4.jpg">
</div>
</div>


$('.slides').cycle({
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    height: function() { 
        var c = jQuery('.slides img');
        jQuery('#top-left .slides').height(c.height()); 
    }
});

这两者的某种混合？

height: function() { 
    var c = jQuery('.slides img');
    jQuery('#top-left .slides').height(c.height()); 
    $("#top-left").animate({
        height: "70%",
        opacity: 0.4,
    }, 1500 );
}

Answer 1

使用之前的回调：see fiddle

$('.slideshow').cycle({
    fx: 'fade',
    before: function(currSlideElement, nextSlideElement){
        var c = $(currSlideElement).height(),
            n = $(nextSlideElement).height(),
            diff = Math.abs(c - n),
            sign = c < n ? '+=' : '-=';

        $('.slideshow').delay(300).animate({ height: sign + diff });
    }
});