Question

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

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

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

JQuery语法帮助滑块基于自动高度移动DIVS

1 个答案: