As we already talk about a few basic things about creating a Jquery plugin. In this tutorial, I will be showing you examples and also explain a few things that you should learn.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>queue demo</title>
<style>
div {
margin: 4px;
height: 42px;
width: 42px;
position: absolute;
left: 1px;
top: 60px;
display: none;
background: black;
}
div.newcolor {
background: green;
}
p {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>The queue length is: <span></span></p>
<div></div>
<script>
var div = $( "div" );
function runIt() {
div
.show( "slow" )
.animate({ left: "+=200" }, 2000 )
.slideToggle( 1000 )
.slideToggle( "fast" )
.animate({ left: "-=200" }, 1500 )
.hide( "slow" )
.show( 1200 )
.slideUp( "normal", runIt );
}
function showIt() {
var n = div.queue( "fx" );
$( "span" ).text( n.length );
setTimeout( showIt, 100 );
}
runIt();
showIt();
</script>
</body>
</html>