Question

我正试图以旋转木马的方式显示两张div卡。向用户呈现带有图表视图的卡片。该卡还有一个按钮以获取更多信息;当他点击信息按钮时，卡片应滑动到屏幕右侧并消失，而包含支持信息的卡片应显示在屏幕左侧。

对于提前缺乏知识感到抱歉

这是我写的。

HTML：

            <div id="userNav" class="box -width--4of4">
                <div class="data-card">
                    <button id="loginPanel" class="button -fill--transparent -is--icon pull-right"><i class="fa fa-info-circle"></i></button>
                  <div id="container" style="min-width: 310px; height: 400px; margin: 20px auto"></div>
                </div>
            </div>

JQuery的：

 $('#loginPanel').click(function(){

            if ($('#userNav').is(':hidden')) {

               $('#userNav').show('slide',{direction:'left'},1000);
            } else {

               $('#userNav').hide('slide',{direction:'left'},1000);
            }
});


$('#loginPanel1').click(function(){

            if ($('#userNav').is(':hidden')) {

               $('#userNav').show('slide',{direction:'right'},1000);
            } else {

               $('#userNav').hide('slide',{direction:'right'},1000);
            }
});

Answer 1

您可以将两张卡片放在一个容器中，将其设置为position: relative;并使卡片处于绝对位置。然后，您可以为卡片创建特定的类，以模拟动画，在设定的持续时间内同时更改每个元素的位置和不透明度。

这可以通过几种不同的方式实现，但这里有一个显示基本概念的fiddle。

编辑：小提琴已更新，以反映评论的问题。

两个div之间的轮播类型的幻灯片

1 个答案: