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()); 
    } 
}); 

これらの2つのミックスのいくつかの並べ替え？

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