JQuery語法幫助滑塊移動基於自動高度的DIVS

Question

我正在使用一個簡單的jQuery來旋轉圖像（淡入淡出），併爲每個圖像有一個自動高亮（想想下面）。

是否有可能根據圖像高度改變＃左上角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 }); 
    } 
});