Javascript 平滑移动到下一个div元素

我想显示下一个视频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>

 $(".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

---

如果要水平滑动，则应使用以下选项。
或 您可以在JQuery UI中使用带幻灯片效果的隐藏（签出答案）