jquery - 我可以为其内容创建一个可变高度的 coda slider 导航吗？

Question

现在大多数人都知道 Coda Slider 效果，但即使使用谷歌搜索并在这里进行搜索，我也找不到我的答案。

问题如何创建 Coda Slider 样式的导航，该导航使用水平滑动/滚动但在滑动动画期间将其高度调整为内容所需的高度？

例如，第一张“幻灯片”中只有一张图片(400 像素宽，300 像素高)，但下一张幻灯片包含大量信息，包括图片、文本和视频内容，总宽度为 400 像素，高度为 800 像素。 现在，开始创建一个 800 像素高的容器只是浪费幻灯片 1 的空间，因此我需要根据单个幻灯片内容所需的高度动态更改幻灯片容器的高度。

这可能吗？ 也许某处有教程，你们中的一个可以指出我的方向。

在技术方面，我对 xHTML 和 CSS 相当适应，但在 jQuery 和 PHP 方面只是业余爱好者。 虽然这不应限制您的回答，但请在解释时牢记这一点。

非常感谢您的阅读， 我期待您的想法、解决方案和一般意见。

詹尼斯

Answer 1

我最近推出了自己的。这是(希望)一个有用的起点。

这是我的“下一步按钮”的代码。

var canSlide = true;
$('.next').bind('click', function() {



            if (!canSlide) { return false } // prevent queuing up of multiple clicks

            $('.prev').fadeIn(500);

            canSlide = false;

            $('.testimonials-container').animate({ left: '-=1011px' }, 1000, function() { canSlide = true });            

            if (currentPane == totalPanes) {

                $('.next').fadeOut(500);
                canScroll = false;

            } else {
                currentPane++;


            }

要让它调整高度，您只需将高度添加到动画的 JSON 参数。比如

.animate({left: '-=1011px', height: newHeight + 'px'})

当然，您需要一些 JavaScript 来确定下一个高度应该是多少!