Question

我正在this codepen上使用年龄验证程序。

以下是我从屏幕顶部向下滑动的内容：

$(document).ready(function() {
    $.age_verifier_id = "28915";
    $.age_verifier_ajax_url = "http://selectoil.com/wp-admin/admin-ajax.php";
    $.AgeVerifier({
        enabled: "1",
        mode: "age",
        minimum_age: "21",
        cookie_expiration: "365",
        animation: "slide",
        title: "Welcome to My website",
        text: "Please use the slider to verify your age",
        background: "#333",
        background_type: "color",
        background_image_url: "http://selectoil.com/wp-content/uploads/2017/06/icon-logo.png",
        text_color: "#ffffff",
        submit_text: "Enter",
        error_message: "You need to be at least [age] years old to continue.",
        safe_url: "",
        safe_url_enabled: "0"
    });
});

我正在尝试制作两张200px x 200px的图像，每张图像在“ Welcome to my website”文字上方并排向下滑动，并按照相同的滑动顺序向下滑动

Answer 1

我建议使用外部动画库。有一个名为animate.css的纯CSS库然后，您可以满足以下要求：

$('#btn').on('click', (e) => {
  $('#overlay').fadeOut();
});

html,body{
  margin:0;
  padding:0;
}
#overlay {
  background-color: #1AB4A1;
  height: 100%;
  margin:0;
  position: fixed;
  width: 100%;
}

#welcomeContainer {
  padding:20px 0px 0px 0px;
  text-align: center;
}

#welcomeContainer img {
  height: 200px;
  width: 200px;
}

#btn {
  background-color: red;
  border-radius: 5px;
  padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
<div id="overlay">
  <div id="welcomeContainer" class="animated fadeInDownBig delay-1s">
    <a href="#" id="btn">confirm</a>
    <br/>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" />
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/img/404.svg" />
  </div>
</div>

<div>
  content behind
</div>

如何在index.js删除脚本中彼此并排添加图像？

1 个答案: