Animation Effects In JQuery UI
Hello Dev,
At this time, i we are going to present you animation results in jQuery ui. This text will provide you with easy instance of animation results in jQuery ui. you’ll animation results in jQuery ui. So let’s comply with few step to create instance of animation results in jQuery ui.
Instance:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta identify="viewport" content material="width=device-width, initial-scale=1">
<title>Animation Results In JQuery UI</title>
<hyperlink rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<model>
canvas{
width:150px !essential;
}
.graph{
width:150px !essential;
float: left;
margin-left: 10px;
}
.main-class{
margin:-107px auto;
rework: translate(80%,50%);
border-radius: 5px;
padding:30px 20px;
border:2px strong inexperienced;
place: absolute;
}
</model>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<physique>
<h2 model="text-align: middle;">Animation Results In JQuery UI</h2>
<div class="main-class">
<div id="graphs"></div>
</div>
<script>
$( perform() {
if ( !$( "<canvas>" )[0].getContext ) {
$( "<div>" ).textual content(
"Your browser would not help canvas, which is required for this demo."
).appendTo( "#graphs" );
return;
}
var i = 0,
width = 100,
top = 100;
$.every( $.easing, perform( identify, impl ) {
var graph = $( "<div>" ).addClass( "graph" ).appendTo( "#graphs" ),
textual content = $( "<div>" ).textual content( ++i + ". " + identify ).appendTo( graph ),
wrap = $( "<div>" ).appendTo( graph ).css( 'overflow', 'hidden' ),
canvas = $( "<canvas>" ).appendTo( wrap )[ 0 ];
canvas.width = width;
canvas.top = top;
var drawHeight = top * 0.8,
cradius = 10;
ctx = canvas.getContext( "2nd" );
ctx.fillStyle = "black";
// Draw background
ctx.beginPath();
ctx.moveTo( cradius, 0 );
ctx.quadraticCurveTo( 0, 0, 0, cradius );
ctx.lineTo( 0, top - cradius );
ctx.quadraticCurveTo( 0, top, cradius, top );
ctx.lineTo( width - cradius, top );
ctx.quadraticCurveTo( width, top, width, top - cradius );
ctx.lineTo( width, 0 );
ctx.lineTo( cradius, 0 );
ctx.fill();
// Draw backside line
ctx.strokeStyle = "#555";
ctx.beginPath();
ctx.moveTo( width * 0.1, drawHeight + .5 );
ctx.lineTo( width * 0.9, drawHeight + .5 );
ctx.stroke();
// Draw prime line
ctx.strokeStyle = "#555";
ctx.beginPath();
ctx.moveTo( width * 0.1, drawHeight * .3 - .5 );
ctx.lineTo( width * 0.9, drawHeight * .3 - .5 );
ctx.stroke();
// Plot easing
ctx.strokeStyle = "white";
ctx.beginPath();
ctx.lineWidth = 2;
ctx.moveTo( width * 0.1, drawHeight );
$.every( new Array( width ), perform( place ) {
var state = place / width,
val = impl( state, place, 0, 1, width );
ctx.lineTo( place * 0.8 + width * 0.1,
drawHeight - drawHeight * val * 0.7 );
});
ctx.stroke();
// Animate on click on
graph.on( "click on", perform() {
wrap
.animate( { top: "conceal" }, 2000, identify )
.delay( 800 )
.animate( { top: "present" }, 2000, identify );
});
graph.width( width ).top( top + textual content.top() + 10 );
});
});
</script>
</physique>
</html>
I hope it is going to help you…
Komentar
Posting Komentar