Question

我在多个必须一个接一个地执行的对象上创建动画。为此，我使用如下构造：

var deferredAnimations = $.Deferred();
deferredAnimations.pipe(function() {
    return $("#" + page + " h1 span.text").unbind()
        .typist({
            cursor: true,
            speed: 12,
            text: 'Hello'
        }).typistStop().delay(2000);
}).
pipe(function() {
    return $("#" + page + " h2").unbind()
        .typist({
            cursor: true,
            speed: 12,
            text: 'world'
        }).typistStop().delay(3000);
}).
pipe(function() {
    return $("#" + page + " h2").
        selectText().
        delay(1000);
}).pipe(function() {
    return $("#" + page + " #drop-in-tool").show().addClass("magictime slideUpRetourn").delay(1000);
}).pipe(function() {
    return $("#" + page + " h2").
        removeClass("fira-sans").
        addClass("droid-serif green italic").
        delay(1000);
}).pipe(function() {
    $("#" + page + " #drop-in-tool").fadeOut("slow");
    return $("#" + page + " h1").
        selectText().
        delay(1000);
}).pipe(function() {
    return $("#" + page + " h1").
        removeClass("work-sans bold").
        addClass("roboto-condensed upper").
        delay(1500);
}).pipe(function() {
    deselectText();
    $("#" + page + " .pop-lines").css("left", $("#" + page).find("h1 .text").offset().left - 20);
    $("#" + page + " h1").fadeOut("slow");
    $("#" + page + " h2").fadeOut("slow");
    return animatePageBackground(page);
}).pipe(function() {
    $("#" + page + " h1").show().addClass("magictime slideLeftRetourn");
    return $("#" + page + " h2").show().addClass("magictime slideRightRetourn").delay(1000);
})
.pipe(function() {
    return $("#" + page + " .pop-line1").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
    return $("#" + page + " .pop-line2").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
    return $("#" + page + " .pop-line3").css("visibility", "visible").addClass("magictime swashIn").delay(50);
}).pipe(function() {
    return animatePageFooter(page);
});

deferredAnimations.resolve();


//page background animate
function animatePageBackground(page) {
    return $("#" + page).promise().pipe(function() {
        $("#" + page + " .page-grid").fadeOut();
        return $("#" + page + " h1").animate({"color":"#ffffff"}, 1000).delay(1000);
    }).pipe(function() {
        $("#" + page + " .page-header").animate({"color":"#ffffff"}, 2000);
        return $("#" + page + " .page-back").fadeIn(2000).delay(1000);
    });
}

//page footer animations
function animatePageFooter(page) {
    $("#" + page).promise().pipe(function() {
        return $("#" + page + " .profile-icon").show().addClass("magictime slideDownRetourn").delay(500);
    }).pipe(function() {
        return $("#" + page + " .profile-name").show().addClass("magictime slideDownRetourn").delay(500);
    }).pipe(function() {
        return $("#" + page + " .icons").show().addClass("magictime slideDownRetourn").delay(500);
    }).pipe(function() {
        return $("#" + page + " .link").show().addClass("magictime slideDownRetourn").delay(500);
    }).pipe(function() {
        return $("#" + page + " .back-btn").fadeIn();
    });
}

但我希望在单击按钮时停止所有动画，并且deferredAnimations.reject（）在这种情况下不起作用，因为据我所知管道创建新的Deferred。

有没有办法在管道列表中停止动画。对于可以中断的多个对象，是否有更好的顺序动画解决方案？

感谢。

如何停止jquery $ .Deferred（）。管道动画

0 个答案: