Слайдер справки по синтаксису 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

Используйте обратный вызов перед: см. Скрипку

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