Queuing animations in Jquery

Question

1.00/5 (1 vote)

See more:

I'm trying to create a webpage in which i've a few span elements which is expected to slideDown one by one. But i'm not able to control the animation and it's getting executed all at the same time. I've the sample code which tried with, below.

Below is the body.

HTML

<body>
    <div id="Line1">
        <br />
        <br />
        <br />
        <span id="spanA" style="background-color: Red; width: 10px; height: 18px;"></span>
        <br />
        <br />
        <span id="spanB" style="background-color: Red; width: 20px; height: 8px;"></span>
        <br />
        <br />
        <span id="spanC" style="background-color: Red; width: 30px; height: 8px;"></span>
        <br />
        <br />
        <span id="spanD" style="background-color: Red; width: 40px; height: 8px;"></span>
        <br />
        <br />
        <span id="spanE" style="background-color: Red; width: 50px; height: 8px;"></span>
        <br />
        <br />
        <span id="spanF" style="background-color: Red; width: 60px; height: 8px;"></span>
        <br />
        <br />
        <span id="spanG" style="background-color: Red; width: 70px; height: 8px;"></span>
        <br />
        <br />
    </div>
</body>

and the jQuery part

JavaScript

$(document).ready(function() {
      $("div span").animate({ width: '+=50px' }, {
          speed: "slow",
          easing: "linear",
          step: function() { setTimeout('', 1000) },
          queue: false
      });
  });

Can anyone please tell me if there is any mistake in the code/syntax or if there is a better way to queue animation?

Thanks,
Daion

Posted 9-Feb-12 1:44am

DieOnTime

Add a Solution

2 solutions

Solution 1

I'm not sure of the relevance of this parameter, but you do realize you set queue to false in your call to the animate function? Have you tried to set it to true?

Regards,

Manfred

Posted 9-Feb-12 2:11am

Manfred Rudolf Bihy

Comments

DieOnTime 9-Feb-12 8:33am

yes manfred, i did and found no difference..

DieOnTime 9-Feb-12 8:34am

can you please give a syntax/code which will make the animation execute in a queue?

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Martin Arapovic · Accepted Answer · 2012-02-09T06:26:00

Hi,

Try this! Maybe this is what you want to achieve...
You can simulate queue!? Change delay variable to desired value to get effect you like...

JavaScript

$(document).ready(function() {

    var delay = 500;
    $("div span").each(function() {
        var item = $(this);
        queueElementAnimation(item, delay);
        delay += 500;
    });

});

function queueElementAnimation($el, deley) {
    setTimeout(function() {
        $el.animate({
            width: '+=50px'
        }, {
            speed: "fast",
            easing: "linear"
        });
    }, deley);
}