Question

所以情况如下：

有3个不同的页面，内容不同。
所有这些页面都有指向其余页面的链接。
当您单击其中一个时，实际页面将淡出，所需的页面将通过JavaScript触发的CSS过渡淡入视口。

到目前为止，这么好，所以问题是什么？

新页面不会替换旧页面空间和位置，它会保留在旧页面空间和位置之下。

我想要达到的效果是，当你点击一个新页面时，它会逐渐淡入旧页面完全相同的位置，只是出现在下面并在上面留下一个空的空格。

$('.btn').click(function(e) {
  e.preventDefault();
  var $target = $(this);
  var $next = $('#' + $(this).attr('href'));
  $target.parent().removeClass('show');
  $target.parent().addClass('hide');
  $next.removeClass('hide');
  $next.addClass('show');
});

.hide {
  opacity: 0;
  transition: all 1s ease;
}

.show {
  opacity: 1;
  transition: all 1s 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page1" class="show">
  Page 1 Content
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page2" class="hide">
  Page 2 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page3" class="hide">
  Page 3 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
</div>

注意：我已经尝试过使用position: absolute但是它有一个错误。同样使用display: none，但这不允许转换/动画，淡出/输入是必须的。

我非常感谢您的时间和精力！请帮帮我！

Answer 1

根据this fiddle查看this answer。它也不需要css，但你需要内联样式。如果需要，也可以替换内联样式。

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

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

Answer 2

略有变化

$('.btn').click(function(e) {
  e.preventDefault();
  var $target = $(this);
  var $next = $('#' + $(this).attr('href'));
  $('.page').removeClass('show').addClass('hide');
  $next.removeClass('hide').addClass('show');
});

.page {
  position: absolute;
  top: 0;
  transition: all 1s ease;
}
.page.hide {
  opacity: 0;
}
.page.show {
  opacity: 1;
  z-index: 999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="page1" class="show page">
  Page 1 Content
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page2" class="hide page">
  Page 2 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page3" class="btn">Show Page 3 and hide this page</a>
</div>

<div id="page3" class="hide page">
  Page 3 Content
  <br>
  <a href="page1" class="btn">Show Page 1 and hide this page</a>
  <br>
  <a href="page2" class="btn">Show Page 2 and hide this page</a>
</div>

CSS转换后用新内容替换空格

2 个答案: