Question

我想要显示下一个视频div，它是通过平滑移动隐藏的。 Jquery .hide（）或.show（）函数随着时间的推移它不会产生预期的输出。我希望以流畅的方式展示。

这是我的源代码：

HTML：

<div class="video_wrapper">
            <div class="videos visible">
                <div class="video_content"></div>
                <div class="video_content"></div>
                <div class="video_content"></div>
                <div class="video_content"></div>
            </div>
            <div class="videos">
                <div class="video_content"></div>
                <div class="video_content"></div>
                <div class="video_content"></div>
                <div class="video_content"></div>
            </div>
            <div class="videos">
                <div class="video_content"></div>
                <div class="video_content"></div>
                <div class="video_content"></div>
                <div class="video_content"></div>
            </div>
        </div>
        <div class="controls">
        <div class="pre_element">&lang;</div>
        <div class="next_element">&rang;</div>
    </div>

Jquery的：

 $(".next_element").click(function() {
            //Show previous button
            $('.pre_element').show();
            //Find the element that's currently showing
            $showing = $('.video_wrapper .videos.visible').first();
            //Find the next element
            $next = $showing.next();
            //Change which div is showing
            $showing.removeClass("visible").hide();
            $next.addClass("visible").show(200);
            //If there's no more elements, hide the NEXT button

Answer 1

如果您想要水平滑动，则应使用horizon-swiper。
或者您可以在JQuery UI中使用Hide with slide effect（Checkout answer here）。

平滑移动到下一个div元素

1 个答案: