Question

我想在单击按钮时在我所在的页面上实现向上滑动效果。 CSS效果完成后，应将我重定向到另一个页面（articles.html）

当前，当我单击按钮时，我仅被重定向到文章页面。我应该如何实现预期的结果？

$(document).ready(function() {

  $("#read-articles").click(function() {
    event.preventDefault();
    linkLocation = 'articles.html';
    $(".body").toggleClass("boom");
    redirectPage()

  });


  function redirectPage() {
    console.log('redirect fired');
    //window.location = linkLocation;
  }
});

.boom {
  transform: translateY(-100vw);
}

.body {
  border: 1px solid;
  height: 100px;
  transition: all 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="body">
  <div id="read-articles">boom</div>
</div>

Answer 1

您可以对滑动使用jQuery的slideUp()方法，并在滑动完成后使用其回调函数进行重定向

$('#read-articles').on('click', function() {

  $('.elem').slideUp(300, function() {
    window.location = 'https://www.stackoverflow.com';
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="elem">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis rutrum lorem. Fusce gravida rhoncus lectus quis vulputate. Morbi ornare ex mauris, non faucibus felis interdum vitae. Nullam faucibus lorem quis pretium consectetur. Pellentesque sed risus vitae neque tempor pulvinar. Phasellus porttitor augue vitae magna dapibus fermentum. Etiam id accumsan erat. Nunc molestie finibus lectus a viverra. Pellentesque id nisi ipsum. Proin vitae magna vel tortor varius consectetur. Morbi vitae dapibus nisl. Ut nec ipsum vel quam imperdiet sodales. Duis ut iaculis enim, ac congue felis. Vestibulum egestas posuere quam, non euismod arcu mollis a. Suspendisse vel dictum neque. Fusce nec libero leo.
</div>

<button id="read-articles">Read</button>

如何实现向上滑动效果并重定向到另一个HTML页面

1 个答案: