Javascript CSS转换后用新内容替换空白

情况是这样的：

• 有3个不同的网页，内容不同
• 所有这些页面都有到其余页面的链接
• 单击其中一个页面时，实际页面会淡出，所需页面会通过JavaScript触发的CSS转换淡入视口

到目前为止，一切顺利，有什么问题吗

• 新页面不会替换旧页面的空间和位置，而是保持在旧页面的下方

我想要达到的效果是，当你点击一个新页面时，它会淡入与旧页面完全相同的位置，而不会出现在下方，并在上方留下一个空白的电子空间

$（'.btn'）。单击（函数（e）{
e、 预防默认值（）；
var$target=$（这是）；
var$next=$（'#'+$（this.attr（'href'））；
$target.parent（）.removeClass（'show'）；
$target.parent（）.addClass（'hide'）；
$next.removeClass（'hide'）；
$next.addClass（'show'）；
});
.hide{
不透明度：0；
过渡：所有的1容易；
}
.表演{
不透明度：1；
过渡：所有1都很容易；
}

第1页内容




第2页内容




第3页内容




看一下基于。
它也不需要css，但需要内联样式。如果需要，也可以替换内联样式

$('.btn').click(function(e) {
  e.preventDefault();
  var $target = $(this);
  var $next = $('#' + $(this).attr('href'));

  $target.parent().fadeOut('slow', function(){
       $next.fadeIn('slow');
    });
});

看一看基于。
它也不需要css，但需要内联样式。如果需要，也可以替换内联样式

$('.btn').click(function(e) {
  e.preventDefault();
  var $target = $(this);
  var $next = $('#' + $(this).attr('href'));

  $target.parent().fadeOut('slow', function(){
       $next.fadeIn('slow');
    });
});

稍有变化


$（'.btn'）。单击（函数（e）{
e、 预防默认值（）；
var$target=$（这是）；
var$next=$（'#'+$（this.attr（'href'））；
$（'.page'）.removeClass（'show'）.addClass（'hide'）；
$next.removeClass（'hide'）.addClass（'show'）；
});
.page{
位置：绝对位置；
排名：0；
过渡：所有的1容易；
}
.page.hide{
不透明度：0；
}
.page.show{
不透明度：1；
z指数：999；
}

第1页内容




第2页内容




第3页内容




略有变化


$（'.btn'）。单击（函数（e）{
e、 预防默认值（）；
var$target=$（这是）；
var$next=$（'#'+$（this.attr（'href'））；
$（'.page'）.removeClass（'show'）.addClass（'hide'）；
$next.removeClass（'hide'）.addClass（'show'）；
});
.page{
位置：绝对位置；
排名：0；
过渡：所有的1容易；
}
.page.hide{
不透明度：0；
}
.page.show{
不透明度：1；
z指数：999；
}

第1页内容




第2页内容




第3页内容




感谢您为我的问题提供了这个功能替代方案！；）感谢您为我的问题提供了这个功能性的替代方案！；）