javascript - 如何顺利更改我的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

你有两个选择

以 Jquery 方式:-

使用 fadeIn fadeOut 代替 show hide

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