Javascript 如何顺利更改我的div内容

我有一个分页，我想通过单击它来更改容器的内容。 这是可行的，但我希望它能顺利进行

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

通过单击我的分页按钮：

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

---

如何才能顺利完成此操作？

您可以使用具有不透明度的过渡，而不是隐藏显示元素的图像

.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
}

您可以在每个div上添加和删除活动类，而不是调用.show（）来显示元素。

您有两个选项

以Jquery方式：-

使用

fadeIn

fadeOut

代替

show

hide

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

以CSS方式：-

使用

transition

设置动画。但是在这种情况下，您只能平滑地使用

不透明度

和

可见性

，而不能使用

显示

  .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;
     }

---

定义“平滑”。另外，对其中提到使用

duration

参数使动画在一段时间内出现的地方，以及其中详细说明所有动画可能性的地方进行一些研究。淡入淡出不会更改可见性属性！！不，它不会更改可见性属性。它将在变换时更改

opacity

，并在末尾显示

display

。fadeOut（）方法为匹配元素的不透明度设置动画。当不透明度达到0时，“显示样式”属性设置为“无”，因此该元素不再影响页面的布局。不，不是这样。fadeIn将不透明度从0更改为1，然后生成显示块。淡出将不透明度从1更改为0，然后使显示为无。确定。您的意思是它根本不设置不透明度属性。我们应该使用fadeTo（）方法或css（）来设置不透明度属性。

  .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;
     }