javascript - 平滑移动到下一个 div 元素

Question

我想显示下一个隐藏的视频 div，移动流畅。 Jquery .hide() 或 .show() 函数随着时间的推移不会产生预期的输出。我想以流畅的 Action 展示。

这是我的源代码:

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 中使用带有幻灯片效果的隐藏(结帐答案 here)。