Question

我正在使用隐藏状态的slick carousel和使用jQuery slideUp / slideDown切换它的链接：

<a href="#" id="carousel-toggle"><span class="fa fa-navicon"></span></a>
<div id="carousel" style="display: none;">
    <div class="carousel">
        <div>your content 1</div>
        <div>your content 2</div>
        <div>your content 3</div>
        <div>your content 4</div>
    </div>
</div>

这是我的jQuery：

$('.carousel').slick();
jQuery(document).ready(function($){
    $('#carousel-toggle').on('click', function(){
        var content = $(this).parents().find('#carousel');
        if (content.is(':visible'))
            content.slideUp("slow");
        else
            content.slideDown("slow");
    });
});

它的工作正常，但我第一次切换 #carousel 它显示所有幻灯片搞砸了，当我第一次点击导航时它开始正常工作，并且把它弄得乱七八糟它了。但是当我使默认状态可见时，它会正常启动。

这个JSFIDDLE解释了这一切：http://jsfiddle.net/walidov/8Lfyfcut/

如果隐藏状态，我怎样才能启动它？我顺便使用bootstrap3。但我需要光滑的旋转木马，因为它有一个很好的响应方法，可以使用bootstrap carousel。

Answer 1

似乎有效的方法是在短暂延迟后用js而不是css隐藏内容。延迟是为了给浮油提供一些时间来启动。

setTimeout(function(){    
    var content = $('#carousel');
    content.slideUp(10);
}, 10);

解决方案：http://jsfiddle.net/8Lfyfcut/12/

所以，有两点需要注意： - 使用css，光滑内容未设置为“display：none” - 在短暂的延迟（setTimeout（））之后，内容会被js隐藏。

当使用jQuery slideUp显示时，光滑的轮播不会启动

1 个答案: