Jquery queue method

Question

I'm having some trouble getting my head around the jquery queue method. I've got the following code, and basically want the four parts of function textScroll to execute one after the other. Any help would be really appreciated.

 $.fn.pause = function (n) {
  return this.queue(function () {
    var el = this;
    setTimeout(function () {
  return $(el).dequeue();
    }, n);
  });
};

function textScroll(){

    $('#winner1, #winner2').css("display", "block")
    .pause(4000)
    .animate({left: '-1000px'}, 2000);

    $('#winner3, #winner4').fadeIn()
    .pause(4000)
    .animate({left: '-1000px'}, 2000);

    $('#winner5, #winner6').fadeIn()
    .pause(4000)
    .animate({left: '-1000px'}, 2000);

    $('.winner_scroll').css("display", "none")
    .pause(1000)
    .css("left", "1000px");
    }

You should look at the delay() method; it does this for you, but you'll have to use the queue() method to queue the css() call, as that doesn't use the fx queue by default. — Matt
– Matt, Commented Jun 14, 2012 at 15:34
Thanks Matt, could you give a brief example to show what you mean? — Barney
– Barney, Commented Jun 14, 2012 at 15:38
` $('.winner_scroll').("display", "none")` um, missing a .css? — Mark Schultheiss
– Mark Schultheiss, Commented Jun 14, 2012 at 15:46
Thanks. I've been stuck on this for a while now, though that wasn't the problem. — Barney
– Barney, Commented Jun 14, 2012 at 15:47

Mark Schultheiss · Accepted Answer · 2012-06-14 17:08:00Z

1

I don't understand that last part that sets display to none, then moves it when it does not show...seems odd, but anyway: You can hard code the variabls back in if you want, but I created them to show an example in a simplictic manner: This uses the callback of the animation to start the next one.

var me = {
    left: "-1000"
};
var myani = 3000;
var mywait = 4000;

function textScroll() {
    $('#winner1, #winner2').css("display", "block").animate(me, myani, function() {
        $('#winner3, #winner4').fadeIn().delay(mywait).animate(me, myani, function() {
            $('#winner5, #winner6').fadeIn().delay(mywait).animate(me, myani, function() {
                $('.winner_scroll').css("display", "none").delay(1000).css("left", "1000px");
            });
        });
    });
}

The CSS is bad on this: http://jsfiddle.net/MarkSchultheiss/q3s9s/ but it is a working example.

edited Jun 14, 2012 at 17:08

answered Jun 14, 2012 at 17:01

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Schultheiss Over a year ago

Just to note, I don't think that last delay is really needed/doing anything as no animation should be active there (and it is not showing anyway...) up to you to decide how to handle that issue.

Barney Over a year ago

Thanks Mark, that's really helpful. Stack Overflow is brilliant lol.

Collectives™ on Stack Overflow

Jquery queue method

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related