0

パワーポイントのように移行したいページがいくつかあります。最初のいくつかのトランジションは完全に機能しますが、最後の 2 つのトランジションは完了するまでに時間がかかりすぎます。アニメーションの時間を短くすると次のアニメーションと重なってしまうので、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()

  2. .show()最初のコンテンツを上書きするために新しいコンテンツを明示的に呼び出すdisplay: none

  3. タイマーは必要ありません-fadeOutcallbackの次のアニメーションを開始するだけです

于 2012-05-01T11:14:07.047 に答える