0

ボタンのクリックによってトリガーされる短い jQuery アニメーションを含むランディング ページがあり、アニメーションが終了した後、サーバー上の別のページにリダイレクトしたいのですが、ランディング ページから別のページにフェードさせたいのです。

現在、他のページにリダイレクトする直前にドキュメント本文をフェードするように設定していますが、フェードが始まると色付きの背景ではなく白い背景が見えるように白にフェードします。この効果を達成するためのより良い方法があると思います。

これが私の現在のコードです：

$(document).ready(function(){
          $("#button").click(function(){
            $(".left").animate(
                {left:'50%'}, 800, 'linear'
            );
            $(".right").animate(
                {right:'50%'}, 800, 'linear'
            );
            $(".top").stop(true, true).delay(800).animate(
                {top:'36px'}, 800, 'easeOutBounce'
            );
            $(".bot").stop(true, true).delay(800).animate(
                {top:'492px'}, 800, 'easeOutBounce'
            );
            $(document.body).delay(1900).fadeTo("slow", 0);
            setTimeout(function () 
            { window.location.href = "start.php"; }, 2000);
          });
        });
4

3 に答える 3

2

これは、次の場合にのみ機能します。

  • AJAX を介して 2 番目のページをメモリまたは非表示の DIV にロードします
  • すでに画面に表示されているものをフェードアウトする
  • 新しいページを DOM にスワップします (すでにフェードされているように設定されています)。
  • 新しいコンテンツをフェードインする
于 2013-12-12T19:36:42.827 に答える
1

リダイレクトを破棄しても構わないと思っている場合は、このようなものが機能するはずです。よりスムーズな移行になるはずです:

$(document).ready(function(){
  $("#button").click(function(){
    $('#hiddenContainer').load('URL TO OTHER DOC HERE');
    $(".left").animate(
        {left:'50%'}, 800, 'linear'
    );
    $(".right").animate(
        {right:'50%'}, 800, 'linear'
    );
    $(".top").stop(true, true).delay(800).animate(
        {top:'36px'}, 800, 'easeOutBounce'
    );
    $(".bot").stop(true, true).delay(800).animate(
        {top:'492px'}, 800, 'easeOutBounce'
    );
    $('SELECTOR OF YOUR OTHER CONTENT').delay(1900).fadeOut(800, function(){
        $('#hiddenContainer').fadeIn(800);
    });
  });
});

http://api.jquery.com/load/

それが一般的な考え方です。お役に立てば幸いです。

于 2013-12-12T19:43:21.687 に答える