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方式： -

使用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;
     }

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上添加和删除活动类。

如何顺利改变我的div内容

2 个答案: