顺利移至下一个div元素

Question

I want to show next videos div which is hidden with smooth move. Jquery .hide() or .show() function with time it does not produce expected output. I want to show with smooth move.

Here is my source code:

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

If You want to slide horizontally, than you should use horizon-swiper .
Or You can use Hide with slide effect (Checkout answer here ) from JQuery UI.