Как плавно менять содержимое div

Question

У меня есть разбиение на страницы, что я хочу изменить содержимое контейнера, щелкнув по нему. это работает, но я хочу, чтобы это произошло гладко.

<div id='container> 
    <div id='0' class='box'></div> 
    <div id='1' class='box'></div> 
    <div id='2' class='box'></div> 
</div> 

стиль:

#container{' 
    position:relative 
} 

.box{ 
    position: absolute; 
    display: none; 
} 

.box:first-child{ 
    display: inline-block; 
} 

щелчком на мои кнопки постраничной:

$(function() { 
    var obj = $('#pagination').twbsPagination({ 
     totalPages: 3, 
     visiblePages: 2, 
     prev:'Prev', 
     next:'Next', 
     onPageClick: function (event, page) { 
      console.info(page); 
      page=page-1; 
      $(".box").hide(function() { 
       $("#"+page).show(); 
      }); 
     } 
    }); 

, как я могу сделать это гладко?

Answer 1

У вас есть 2 варианта

В Jquery Путь: -

Используйте fadeInfadeOut вместо showhide

$(".box").fadeOut("slow",function() { 
    $("#"+page).fadeIn('slow'); 
}); 

В CSS Путь: -

Используйте transition для анимации. но в этом случае вы только можете играть плавно opacity и visibility и не display

.box{ 
    position: absolute; 
    opacity: 0; 
    visibility:hidden; 
    -webkit-transition: all 2s ease 0s; 
    -moz-transition: all 2s ease 0s; 
    -o-transition: all 2s ease 0s; 
    -ms-transition: all 2s ease 0s;*/ 
    transition: all 2s ease 0s; 
    } 

Answer 2

Вы можете использовать переходы с непрозрачностью, а не скрывать показ элементов.

.box { 
    position: absolute; 
    display: block; // not required but do not keep it as display: none 
    opacity: 0; // make the div invisible! 
    transition: opacity 1s linear; // tell the browser how and what to transition 
    -webkit-transition: opacity 1s linear; // webkit support 
    -moz-transition: opacity 1s linear; // firefox support 
} 

.box.active { 
    opacity: 1; // only applies when a box has the class .box and .active 
} 

Вместо вызова .show(), чтобы показать элемент, вы можете добавить и удалить активный класс для каждого div.