4 Replies - 2457 Views - Last Post: 05 November 2012 - 06:40 PM

#1 ravikiran032  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-January 09

Loading animation doesn't work exactly

Posted 03 November 2012 - 05:48 AM

Hi,

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Loading animation doesn't work exactly

#2 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 36
  • Joined: 16-October 12

Re: Loading animation doesn't work exactly

Posted 03 November 2012 - 09:03 AM

Hi.. ravikiran032
Basically your logic is true, but i think at last else in if statement make your loading not work properly. Try to change your last else with this code :
          count=1;
          $("div[id='1']").hide();
          $("div[id='2']").hide();
          $("div[id='3']").hide();
          $("div[id='1']").show(2000,loader_grphic);



please, let me know if it's help you.

This post has been edited by DiscimusVivere: 03 November 2012 - 09:03 AM

Was This Post Helpful? 0
  • +
  • -

#3 ravikiran032  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 27-January 09

Re: Loading animation doesn't work exactly

Posted 05 November 2012 - 08:08 AM

Yes the change works. I am getting exactly what i need. But why my previous code doesn't work, any reasons?

This post has been edited by Dormilich: 06 November 2012 - 08:15 AM
Reason for edit:: removed unnecessary quote

Was This Post Helpful? 0
  • +
  • -

#4 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 36
  • Joined: 16-October 12

Re: Loading animation doesn't work exactly

Posted 05 November 2012 - 06:32 PM

$("div[class='box']").hide(2000,loader_grphic);


Was This Post Helpful? 0
  • +
  • -

#5 DiscimusVivere  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 36
  • Joined: 16-October 12

Re: Loading animation doesn't work exactly

Posted 05 November 2012 - 06:40 PM

Nice to hear that is work..
  $("div[class='box']").hide(2000,loader_grphic);


it's mean div with class box in this context all your square will be hide. if you are debugging with firebug you'll get an animation in if case are execute but because animation in else not finished the animation do other animation in if.
so in simple word animation is stacked.

please correct me if i wrong
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1