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/但它是一个有效的例子。

Jquery队列方法

1 个答案: