1

jquery.animate を使用して ajax でページをロードし、準備ができたらアニメーション化して上または横にスライドさせる方法はありますか? index.html ページにいるとしましょう。about.html ページに移動したい場合、最初にページが読み込まれ、新しいページに更新する代わりに準備が整うと、次のメソッドを使用してアニメーション化されます: http: //demos.flesler.com/jquery/localScroll/#section4c

function(){
$("#go2About").click(function(){
    $('about.html').animate({
         //animate the new page here
    });
});

これは、アニメーション化する方法のある種のサンプルコードになります

4

2 に答える 2

0

実際にページを更新しないだけで、同じ効果が得られる可能性があります。

たとえば、各「ページ」の HTML をラッパー<div>要素でラップする場合、ユーザー ビュー ポートの内外でこれらのラッパー div を単純にアニメーション化して、ページ遷移の効果を作成できます。

AJAX 呼び出しは、対応する<div>要素にページ HTML を取り込むことができ、読み込まれると.animate()関数を呼び出してページを交換できます。

于 2012-06-07T19:18:05.013 に答える
0

次のようなロジックを使用できます。

<!DOCTYPE>

<html>
<head>
    <title>Test</title>

    <script type="text/javascript">
        function loadIt() {
            $.ajax({
                url: "about.html",
                cache: false,
                success: function (data) {
                    $("#content").empty();
                    $(data).hide().appendTo($("#content")).slideDown();
                },
                error: function () {
                    alert("something went wrong");
                }
            });
        }
    </script>
</head>
<body>
    <input type="button" id="button1" value="Load About" onclick="loadIt();" />

    <br />

    <div id="content" style="width: 400px; height: 400px; border: 1px solid #000;">

    </div>
</body>
</html>

ただし、"about.html" のコンテンツは完全な HTML ドキュメントであってはならず、 <body> 要素に含まれるものでなければならないことに注意してください。

簡単な方法は、iframe (コンテンツがない場合は非表示) を使用することです。ボタンをクリックすると、javascript で iframe の src 属性を「about.html」に設定し、slideDown() を使用してアニメーション化します。 「ロード」。このように、「about.html」は完全な HTML ドキュメントにすることができ、そのようなことを心配する必要はありません。

于 2012-06-07T19:25:41.640 に答える