jQuery fadeIn jCarouselLite div 导致滑块不前进答案

【问题标题】：jQuery fadeIn jCarouselLite div causes slider not to advancejQuery fadeIn jCarouselLite div 导致滑块不前进
【发布时间】：2012-12-17 21:38:32
【问题描述】：

我在 CakePHP 应用程序中有一个工作的 jCarouselLite 滑块，需要最后一次调整。客户端希望滑块在大约五秒钟内不加载，以便用户可以看到它后面的背景图像。

到目前为止，我的设置是这样的：

<script type="text/javascript">
        $(document).ready(function() {
            $('#carouselDelay').delay(5000).fadeIn(400);
        });
    </script>

<?php echo $this->Html->script(array('jquery.easing.1.3','jcarousellite_1.0.1','jquery.mousewheel.min'), array('inline' => false, 'safe' => false)); ?>
<script type="text/javascript">
    $(document).ready(function() {
        $('#carousel').jCarouselLite({
            btnNext: ".next",
            btnPrev: ".prev",
            circular: true,
            auto: 5000,
            beforeStart: function(a) {
              jQuery(a).parent().fadeTo(300, 0);
            },
            afterEnd: function(a) {
              jQuery(a).parent().fadeTo(300, 1);
            },
            speed: 0,
            visible: 1,
            btnGo: [".carouselThumb .1", ".carouselThumb .2",
                ".carouselThumb .3", ".carouselThumb .4", ".carouselThumb .5", ".carouselThumb .6", ".carouselThumb .7", ".carouselThumb .8", ".carouselThumb .9"]
        });
    });

</script>

<div id="carouselDisplay">
    <div id="carousel">
         <!-- Carousel content here -->
    </div>
</div>

问题是当我在#carouselDisplay 上启用淡入淡出效果时，滑块本身不会前进到下一张幻灯片。

我曾尝试调用 jQuery noConflict，但这并没有帮助。我还尝试将延迟和淡入淡出效果移动到 $(window).load 事件，但结果是一样的。

您能帮我弄清楚为什么延迟与滑块推进发生冲突吗？我没有找到任何其他报告。

谢谢！

【问题讨论】：

我也注意到我的 div 中有一个错字——我调用了#carouselDisplay 而不是#carouselDelay。糟糕！

标签： jquery slider cakephp-2.1 jcarousellite

【解决方案1】：

您应该将轮播作为fadeIn方法（回调）的第二个参数来启动：

$('#carouselDelay').delay(5000).fadeIn(400, function() {
    $('#carousel').jCarouselLite({
        [...]
        [...]
    });
});

由于容器被隐藏，jCarousel 将无法计算 GUI。

（用智能手机写的，如有错别字请见谅:)）

【讨论】：

效果很好！也非常感谢您的解释！