順利移動到下一個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。
或 您可以使用JQuery UI中的隱藏與幻燈片效果（Checkout answer here）。