jQuery队列方法

Question

我在理解 jquery 队列方法时遇到了一些麻烦。我有下面的代码，基本上是想让函数textScroll的四个部分一个接一个地执行。任何帮助将不胜感激。

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

Answer 1

我不明白最后一部分将显示设置为无，然后在它不显示时移动它......看起来很奇怪，但无论如何：如果你愿意，你可以硬编码变量，但我创建了它们以简单的方式显示一个示例：这使用动画的回调来开始下一个。

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

CSS 在这方面不好：http://jsfiddle.net/MarkSchultheiss/q3s9s/ 但它是一个工作示例。