gpt4 book ai didi

javascript - 随机句子生成器 : how to add a fade-in effect on a mouseclick

转载 作者:行者123 更新时间:2023-11-30 14:33:15 24 4
gpt4 key购买 nike

我创建了一个代码,每次点击都会显示不同的句子。我想添加一个“淡入”效果,每当您在屏幕上单击时,文本在滚动时淡入,就像在本网站上一样: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>

提前致谢

最佳答案

您可以使用 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>

关于javascript - 随机句子生成器 : how to add a fade-in effect on a mouseclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50836774/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com