极客教程如何在jQuery中使一个flash元素
在这篇文章中，我们将使用jQuery创建闪光元素。有两种方法在下面讨论。
我们将使用CDN链接来包含jQuery内容。jQuery的CDN链接必须被添加到HTML文档中。
https://code.jquery.com/
我们将使用HTML5和CSS3来创建我们文件的结构，并添加所需的元素。
- HTML代码。我们将在一个带有黑色边框的Div元素中添加一些虚拟文本。随后，我们将使这个文本闪光。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
</head>
<body>
<h2 class="header">Geeks for Geeks</h2>
<div class="element">
<p class="text flash1">
This is the flashing element</p>
</div>
</body>
</html>
- CSS代码。让我们用CSS设计元素，使页面具有吸引力。
CSS code:
<style>
.header {
margin-left: 18px;
color: rgb(0, 153, 0);
}
.element {
border: 2px solid black;
width: 12vw;
padding: 5px;
}
</style>
- 输出:
方法1：使用fadeIn()和fadeOut()方法：在这种方法中，我们将在元素上设置连续的fadeIn()和fadeOut()方法，然后设置一个时间间隔以确保闪烁无限期地持续下去。
$(document).ready(() => {
setInterval(() => {
$('p').fadeIn();
$('p').fadeOut();
}, 500);
});
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>
How to make an element
"flash" in jQuery?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<style>
.header {
margin-left: 18px;
color: rgb(0, 153, 0);
}
.element {
border: 2px solid black;
width: 12vw;
padding: 5px;
}
</style>
</head>
<body>
<h2 class="header">Geeks for Geeks</h2>
<div class="element">
<p class="text flash1">
This is the flashing element
</p>
</div>
<script>
(document).ready(() => {
const lheight =('.element').height();
setInterval(() => {
('p').fadeIn();
('p').fadeOut();
// The following code keeps the
// height of the div intact
if (('.element').height() !== 0) {
('.element').css('height', `${lheight}px`);
}
}, 500);
});
</script>
</body>
</html>
输出:
方法2：使用toggleClass()方法：我们将使用该方法来改变具有不同设计的CSS类。结果是，该元素将看起来是闪光的。
让我们添加所需的CSS类。
<style>
.header {
color: rgb(0, 153, 0);
}
.element {
border: 2px solid black;
width: 12vw;
padding: 5px;
}
.flash1 {
color: black;
}
.flash2 {
color: rgb(0, 153, 0);
}
</style>
下面的JavaScript将帮助我们使文本元素以不同的颜色闪烁。
$(document).ready(() => {
setInterval(() => {
switch ($("p").attr("class")) {
case "text flash1":
$("p").toggleClass("flash1 flash2");
break;
case "text flash2":
$("p").toggleClass("flash2 flash1");
}
}, 500);
});
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<title>
How to make an element
"flash" in jQuery?
</title>
<style>
.header {
margin-left: 16px;
color: rgb(0, 153, 0);
}
.element {
border: 2px solid black;
width: 12vw;
padding: 5px;
}
.flash1 {
color: black;
}
.flash2 {
color: rgb(0, 153, 0);
}
</style>
</head>
<body>
<h2 class="header">Geeks for Geeks</h2>
<div class="element">
<p class="text flash1">
This is the flashing element
</p>
</div>
<script>
(document).ready(() => {
setInterval(() => {
switch (("p").attr("class")) {
case "text flash1":
("p").toggleClass("flash1 flash2");
break;
case "text flash2":
("p").toggleClass("flash2 flash1");
}
}, 500);
});
</script>
</body>
</html>
输出:
