How To Add Flash Animation To Button In Jquery
How to brand an element "flash" in jQuery ?
In this article, nosotros will create flashing elements using jQuery. There are two approaches that are discussed below.
Nosotros volition use the CDN link to include jQuery content. The CDN link of jQuery must be added to the HTML document.
https://lawmaking.jquery.com/
We will use HTML5 and CSS3 to create the structure of our document and add together the required elements.
- HTML Code: We will add together some dummy text inside a div element with blackness border. After, we will make this text flash.
<!DOCTYPE html><htmllang="en"><caput><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><championship>Document</championship><linkrel="stylesheet"href="style.css"><scriptsrc=integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script></caput><body><h2class="header">Geeks for Geeks</h2><divclass="element"><pcourse="text flash1">This is the flashing chemical element</p></div></trunk></html> - CSS Lawmaking: Allow us design the elements using CSS to make the folio attractive.
CSS code:
<fashion>.header {margin-left:18px;colour:rgb(0,153,0);}.element {border:2pxsolidblackness;width:12vw;padding:5px;}</style> - Output:
Approach 1: Using fadeIn() and fadeOut() Method: In this approach, we will set consecutive fadeIn() and fadeOut() methods on the chemical element and then set an interval to ensure the flashing continues indefinitely.
$(document).gear up(() => {
setInterval(() => {
$( 'p' ).fadeIn();
$( 'p' ).fadeOut();
}, 500);
});
Example:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = i .0">
< title >
How to make an chemical element
"flash" in jQuery?
</ title >
< script src =
integrity =
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin = "anonymous" >
</ script >
< style >
.header {
margin-left: 18px;
color: rgb(0, 153, 0);
}
.chemical element {
border: 2px solid black;
width: 12vw;
padding: 5px;
}
</ style >
</ head >
< body >
< h2 class = "header" >Geeks for Geeks</ h2 >
< div grade = "chemical element" >
< p class = "text flash1" >
This is the flashing chemical element
</ p >
</ div >
< script >
$(document).ready(() => {
const lheight = $('.chemical element').height();
setInterval(() => {
$('p').fadeIn();
$('p').fadeOut();
// The following code keeps the
// height of the div intact
if ($('.chemical element').height() !== 0) {
$('.element').css('elevation', `${lheight}px`);
}
}, 500);
});
</ script >
</ trunk >
</ html >
Output:
Approach 2: Using toggleClass() method: Nosotros will apply the method to change CSS classes with different designs. As a consequence, the element will seem to be flash.
Let us add the required CSS classes:
< style >
.header {
colour: rgb(0, 153, 0);
}
.chemical element {
edge: 2px solid blackness;
width: 12vw;
padding: 5px;
}
.flash1 {
color: black;
}
.flash2 {
color: rgb(0, 153, 0);
}
</ manner >
The following JavaScript volition assistance the states to brand the text element flash with a unlike color:
$(document).ready(() => {
setInterval(() => {
switch ($( "p" ).attr( "class" )) {
instance "text flash1" :
$( "p" ).toggleClass( "flash1 flash2" );
break ;
instance "text flash2" :
$( "p" ).toggleClass( "flash2 flash1" );
}
}, 500);
});
Example:
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta proper name = "viewport" content =
"width=device-width,initial-scale=1.0" >
< script src =
integrity =
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin = "bearding" >
</ script >
< title >
How to make an element
"flash" in jQuery?
</ title >
< manner >
.header {
margin-left: 16px;
color: rgb(0, 153, 0);
}
.element {
border: 2px solid black;
width: 12vw;
padding: 5px;
}
.flash1 {
color: blackness;
}
.flash2 {
color: rgb(0, 153, 0);
}
</ style >
</ head >
< torso >
< h2 grade = "header" >Geeks for Geeks</ h2 >
< div class = "element" >
< p class = "text flash1" >
This is the flashing element
</ p >
</ div >
< script >
$(certificate).ready(() => {
setInterval(() => {
switch ($("p").attr("class")) {
example "text flash1":
$("p").toggleClass("flash1 flash2");
interruption;
case "text flash2":
$("p").toggleClass("flash2 flash1");
}
}, 500);
});
</ script >
</ trunk >
</ html >
Output:
Source: https://www.geeksforgeeks.org/how-to-make-an-element-flash-in-jquery/
Posted by: andersoncrushe.blogspot.com
0 Response to "How To Add Flash Animation To Button In Jquery"
Post a Comment