0

我有几页我想像在 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 () {

    });
};

谢谢

4

1 回答 1

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

...

笔记：

  1. 将内容作为 DOM 元素显式移动到显示div中，而不是序列化和反序列化 -.clone()如果您需要重复动画，请添加 a。

  2. 显式调用.show()新内容以覆盖初始内容display: none

  3. 不需要计时器 - 只需在callbackfadeOut中开始下一个动画

于 2012-05-01T11:14:07.047 回答