CODEWITHSUNDEEP
jqueryqueuelogic
Barney
Barney

Reputation: 1848

Jquery queue method

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");
    }

Upvotes: 0

Views: 110

Answers (1)

Mark Schultheiss
Mark Schultheiss

Reputation: 34178

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.

Upvotes: 1

Related Questions