Here in this blog I am going to explain about the JQuery CLONE WITH CHANGING ID, for doing this we have to know about the clone() method so this method used for performing a deep copy of the set identical elements, it is useful for moving copies of same line of paragraph or any type of content to the other location.
Syntax for clone() method
selector.clone()
As you will see in the script insertAfter() method is used, this is used for inserting the content, specified by the content that is going to be added, after each selected element.
Syntax for inserAfter() method:-
$("<div>").insertAfter('.box');
While the text() method is used for setting the text content of the selected elements when it returns the content it will return the text only by excluding the HTML.
syntax used for text() method:-
$(selector).text(function(index,currentcontent))
Below is the line of code that will help you to understand it properly
<!DOCTYPE html>
<html>
<head>
<title>Example of animate using jquery</title>
<style>
html,
body {
height: 100%;
}
body {
background: #fff;
background: radial-gradient(#fff, #ccc);
}
.wrap {
bottom: 130px;
margin-left: -50px;
position: absolute;
width: 100px;
}
.red { left: 25%; }
.green { left: 50%; }
.blue { left: 75%; }
.ball,
.shadow {
border-radius: 100%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
}
.ball {
animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
height: 50px;
width: 50px;
}
.red .ball { background: linear-gradient(#e55, #b00); }
.green .ball { background: linear-gradient(#5d5, #0a0); }
.blue .ball { background: linear-gradient(#59e, #04b); }
.shadow {
animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
background: #000;
bottom: -90px;
height: 25px;
width: 75px;
}
.red .ball,
.red .shadow { animation-delay: -200ms; }
.green .ball,
.green .shadow { animation-delay: -100ms; }
.blue .ball ,
.blue .shadow { animation-delay: 0; }
@keyframes ball {
0% {
transform: translateY( 0 );
}
100% {
transform: translateY( -150px );
}
}
@keyframes shadow {
0% {
opacity: 0.2;
transform: scale( 0.75 );
}
100% {
opacity: 0.05;
transform: scale( 1 );
}
}
</style>
</head>
<body>
<div class="wrap red">
<div class="shadow"></div>
<div class="ball"></div>
</div>
<div class="wrap green">
<div class="shadow"></div>
<div class="ball"></div>
</div>
<div class="wrap blue">
<div class="shadow"></div>
<div class="ball"></div>
</div>
</body>
</html>
Output:- Download the below link.
0 Comment(s)