Плавный переход к следующему элементу div

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.
Или Вы можете использовать Hide with slide effect (Checkout answer here) из пользовательского интерфейса JQuery.