New Topic/Question
Reply
I am learning java script and jquery. I am working on a code to display a loading effect, simply creating four small rectangular boxes( let it be represented with character 'A') as A A A A
My animation should be as below
in first step: A
in second step: A A
in third step: A A A
in fourth step: A A A A
in fifth step: A
in sixth step: A A
This animation appears after a button click and looks as loading graphic effect when displayed in continuous manner. I am able achieve first four steps but in the fifth step i am getting A A A A(4 boxes) where the process should loop again from the first step but appearing as a blinking effect instead of loading effect.
My code:
<!DOCTYPE html>
<html>
<head>
<style>
.box
{
width:20px;
height:10px;
background:#000;
margin-right:20px;
float:left;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1'></script>
<script>
$(document).ready(function(){
$("p").hide();
var count=1;
$("div[class='box']").hide();
$("button").click(function loader_grphic(){
$("button").hide();
$("p").show();
if(count==1)
{
count+=1;
$("div[id='1']").show(2000,loader_grphic);
}
else if(count==2)
{
count+=1;
$("div[id='2']").show(2000,loader_grphic);
}
else if (count==3)
{
$("div[id='3']").show(2000,loader_grphic);
count+=1;
}
else
{
count=1;
$("div[class='box']").hide(2000,loader_grphic);
}
});
});
</script>
</head>
<body>
<p>loading...</p>
<div class="box" id="1"></div>
<div class="box" id="2"></div>
<div class="box" id="3"></div>
<button id="but">click to load</button>
</body>
</html>
I found this website resourceful and can help in my learning. If any wrongs please correct me, i am a beginner.
MultiQuote
| 