Question

我有几页我想转发，就像我们在powerpoint中所做的那样。前几个转换工作完美，但最后两个转换需要很长时间才能完成。如果我缩短动画时间，它会与下一个动画重叠，所以我不得不使用setTimeout（）。这是小提琴http://jsfiddle.net/yWAgp/

var currentPageNumber = 1;
jQuery.easing.def = "linear";

$(document).ready(function () {
    $(".divContentContainer").center();
    AnimatePage1();
})

jQuery.fn.center = function () {
    this.css("position", "absolute");
    this.css("top", (($(window).height() - this.outerHeight()) / 2) +
    $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) +
    $(window).scrollLeft() + "px");
    return this;
}

var ResetPageContainer = function () {
    $(".pages").html("");
}

var AnimatePage1 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-1").html());
    $('.page-1-img').animate({
        opacity: 100,
        width: "538px",
        height: "166px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage2(); }, 1200);
    });
};

var AnimatePage2 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-2").html());
    $('.page-2-img').animate({
        opacity: 100,
        width: "698px",
        height: "151px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage3(); }, 1200);
    });
};

var AnimatePage3 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-3").html());
    $('.page-3-img').animate({
        opacity: 100,
        width: "894px",
        height: "116px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage4(); }, 4000);
    });
};

var AnimatePage4 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-4").html());
    $('.yours').animate({
        opacity: 100,
        width: "585px",
        height: "276px"
    }, 3000, function () {
        $(this).fadeOut(1000);
        setTimeout(function () { AnimatePage5(); }, 6000);
    });
};

var AnimatePage5 = function () {
    ResetPageContainer();
    $('.pages').html($("#page-5").html());
    $('.tommylogo').animate({
        opacity: 100,
        width: "960px",
        height: "120px"
    }, 3000, function () {

    });
};

由于

Answer 1

我无法确切地说出你做错了什么，但我重写了一些代码，现在如果工作正常 - 请参阅http://jsfiddle.net/alnitak/j5zeL/

现在代码如下：

var load = function(id) {
    $('.pages').empty();
    $(id).appendTo('.pages').show();
};

var AnimatePage1 = function() {
    load('#page-1');
    $('.page-1-img').animate({
        opacity: 100,
        width: "538px",
        height: "166px"
    }, 3000).fadeOut(1000, AnimatePage2);
};

...

注意：

将内容显式移动作为DOM元素显示在div中，而不是序列化和反序列化 - 如果需要重复动画，请添加.clone()。
在新内容上明确调用.show()以覆盖初始display: none
不需要计时器 - 只需在 fadeOut

callback

jQuery动画越来越慢，有点紧张

1 个答案: