时间戳

首页 > 解决方案 > 随机句子生成器：如何在鼠标单击时添加淡入效果

javascript - 随机句子生成器：如何在鼠标单击时添加淡入效果

问题描述

我创建了一个代码，每次点击都会显示不同的句子。每当您单击屏幕时，我想添加“淡入”效果，滚动时文本会像本网站一样淡入：https ://amessagefrom.earth/

但是，每当我添加效果时，句子都不会显示。 

$(document).click(function() {
  var sentences = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7'
  ];

  var rand = sentences[Math.floor(Math.random() * sentences.length)];
  $('#quotes').text(rand);
});
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>

  <title>Page Title</title>
</head>

<body>
  <div id="quotes"></div>

</body>

</html>

提前致谢

标签： javascripthtmlrandomfadesentence

解决方案

您可以使用 JQuery 和fadeIn()andfadeOut()函数。但这并不完全是滑动效果。

如需更多效果，您可以查看以下内容： http: //api.jquery.com/category/effects/

$(document).click(function() {
  var sentences = [
    '1',
    '2',
    '3',
    '4',
    '5',
    '6',
    '7'
  ];

  var rand = sentences[Math.floor(Math.random() * sentences.length)];
  $('#quotes').fadeOut("slow", function() {
    $('#quotes').text(rand);
    $('#quotes').fadeIn("slow", function() {
      // Animation complete
    });
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="main.js"></script>

  <title>Page Title</title>
</head>

<body>
  <div id="quotes"></div>

</body>

</html>

推荐阅读