随机句子生成器:如何在鼠标点击上添加淡入效果

Question

我创建了一个代码，每次点击都会显示一个不同的句子。我想添加一个‘淡入’效果，每当你点击屏幕上的文字淡入，就像这个网站上的滚动：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>

​

提前感谢

Answer 1

您可以使用JQuery以及fadeIn()和fadeOut()函数。不过，这并不完全是滑动效果。

要获得更多效果，您可以查看以下内容：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>

​

Answer 2

如果你想要简单的淡入淡出效果，可以参考this。有很多jquery函数可以做到这一点。以下是示例代码

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

如果你想要你给定的链接有类似的效果，这里是from library textillate的示例代码。

<h1 class="tlt" data-in-effect="rollIn">Title</h1>
$(function () {
    $('.tlt').textillate();
});

这里是参考library的链接。

Answer 3

$(document).click(function () {

var prev = "";
var sentences = [
    'You are somewhere in the ocean.',
    'You are the seer and the snake.',
    'The irony is that you are a Pure Soul, but you also experience your life.',
    'Months earlier, a high school student told me who I am.',
    'This is a new sense of self.',
    'Meditation has made a great impact on your life because no one else is going mad.',
    'YOU\'D HARDLY CHOOSE TO BE. YOU ARE GOD.',
    'IN REALITY, YOU ARE MAKING.',
    'SELF-REFLECTION IS A NEW SENSE OF SELF AND IS TRAGICALLY LIMITED.',
    'MEDITATION CAN HELP BRING YOU BACK IN THE IMAGE OF GOD, GOD IS THE SEER.',
    'All the suffering in life is because of what you\'ve done.',
    'A father, a husband because you have a son.',
    'A passenger because you have a son.',
    'You\'d have to permit that new sense of self waiting to be born.',
    'Daily, we are made in the wind.',
    'Though sinful, we can be reconciled to God in Christ and come to realize it\’s who I am.',
    'For infinite past lives the Soul has been given to you.',
    'It is essential to understand that you are an eternal Soul.',
    'A vapor in the ocean',
    'You are somewhere in the wind.',
    'The irony is that you are likely to crack.',
    'For those, who are you?',
    'There may be an identity crisis.',
    'I am yours',
    'THE TRUTH IS THAT YOU ARE ON A TRAIN.',
    'ALL LIVING BEINGS DESIRE TO BE A CHILD OF GOD.',
    'THIS PERMITS US TO FEEL ANXIOUS.',
    'EVERYTHING YOU NEED IS INSIDE OF YOU, SHE TOLD ME',



];
var rand = sentences[Math.floor(Math.random() * sentences.length)];
if (rand == prev) {
    var rand = sentences[Math.floor(Math.random() * sentences.length)];
}
prev = rand;

// Wrap every letter in a span
$('#quotes').text(rand);
$('#quotes').each(function () {
    $(this).html($(this).text().replace(/([^\x80-\xFF]|\w)/g, "<span class='letter'>$&</span>"));
});
anime.timeline({ loop: false })
    .add({
        targets: '#quotes .letter',
        opacity: [0, 1],
        easing: "easeInOutQuad",
        duration: 2250,
        delay: function (el, i) {
            return 150 * (i + 1)
        }
    }).add({
        targets: '#quotes',
        opacity: 100,
        duration: 1000,
        easing: "easeOutExpo",
        delay: 1000
      });
/* $('#quotes').fadeOut("slow", function() {
   $('#quotes').text(rand);
   $('#quotes').fadeIn("slow", function() {
     // Animation complete*/
 });