时间戳

首页 > 解决方案 > 延迟淡入和淡出页面 - jquery

javascript - 延迟淡入和淡出页面 - jquery

问题描述

单击功能后，我无法使用 jquery 重新加载我的页面。分配是在body标签中使用带有a标签的点击功能。a 标签必须淡出并重新加载同一页面。所以需要以下几点：

• 将要加载的页面作为参数提供给 onclick 函数。
• 淡出本身需要 1.5 秒。
• 淡出后，您可以使用以下命令加载存储在变量 url 中的页面： window.location.href = url;

编写 jQuery 代码以在加载网页后隐藏页面。然后确保页面在 1.5 秒内到达。

所以我尝试了这些东西......

Function's like: $("a").click(function(){
    $("p").fadeToggle();
    $("p").fadeToggle("slow");
    $("p").fadeToggle(1500);

我也尝试在代码中使用fadeIn和fadeOut，但它没有帮助..

<html>
<head>
<script src="jquery-3.4.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery</title>
  <script>$(document).ready(function(){
    $('a').click(function(e) {
    e.preventDefault();
    newLocation = this.href;
    $('p').fadeOut('slow', newpage);
    });
    function newpage() {
    window.location.href = url;
    }
    });
  </script>
</head>
<body>
<p>Click <a href="#">here</a> to reload the page</p>
</body>
</html>

标签： javascriptjqueryhtml

解决方案

您可以参考下面的片段

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>$(document).ready(function () {
    $('a').click(function (e) {
        e.preventDefault();
        newLocation = this.href;
        $('p').fadeOut('slow', newpage);
    });
    function newpage() {
        window.location.href = "http://www.google.com";
    }
});
    </script>
    
      <p>Click <a href="#">here</a> to reload the page</p>

推荐阅读