4

私はゆっくりと仕事を進め、さまざまなアプローチを継続的に試みています。

簡単な質問...

.fadein .fadeout .slideup .slidedown などの jquery アニメーション効果を onclick .load に追加することは可能ですか?

リンクをクリックした瞬間に、指定した領域にページが読み込まれますが、この .load に効果を関連付ける方法がわかりません。

助言がありますか？

編集: コード例:

$(document).ready(function(){ 
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").load("page1.html");
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").load("page2.html");
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").load("page3.html");
    });
});

編集: HTML ファイルからのスニペット:

//ページを表示する場所

    <div id="main_content_inner">
        <h1>
            Main Content
        </h1>
    </div>

// ユーザーがページを選択するサイドバー メニュー

            <ul id="sidebar_menu">

            <p><li id="page1"> page1</li></p>

            <p><li id="page2"> page2</li></p>

            <p><li id="page3"> page3</li></p>

          </ul>

このコードは現在、メイン ページの指定された div に html ドキュメントをロードします。これをやりたいのですが、トランジションがあります。

ドキュメントから特定のコンテンツを読み込むのではなく、html ドキュメント全体を読み込むことを選択しました。これは、ドキュメントの特定のコンテンツに JavaScript を含め、それをメイン ページに読み込もうとしたときに、JavaScript (Twitter のツイート) が読み込まれないことがわかったためです。見せる。しかし、htmlファイルを個別に開くと正常に動作するため、ajaxがメインページのコンテンツdivにjavascriptをロードするように見えました。

このコードを私のニーズに合わせてより実用的にするための提案など...批判や特に提案はすべて学習に関するものであるため、自由です。

ありがとう

4

3 に答える 3

5 
$('.element').click(function()
{
    $('.load').load('url').hide().fadeIn('slow');
});
于 2011-02-02T19:14:54.153 に答える
1

ページの読み込みが完了した後に何かをしようとしている場合は、 $(document).ready() が必要になります。

http://api.jquery.com/ready/

load() ではなく ready() を使用する理由は、html が解析されるときに load() が発生するが、Document Object Model (DOM) の準備が整う前に発生するためです。これは、JS がページ (DOM) を操作するために依存しているものです。コンテンツ。そのため、ブラウザが表示するものを調整する場合、たとえば実際のコンテンツを操作する場合 (要素/クラス/構造の追加/削除/操作、ライトボックスやその他のプラグインの初期化、エフェクトの実行など) に ready() をアタッチします。 .

だから、私はあなたが説明していると思います：

$(document).ready(function(){
    $('a.clickaffected').each(function(){
        $(this).fadeIn();
    });
});

編集：コールバック関数を実行したい：

$(document).ready(function(){ 
    // load home.html page when the page loads
    $("#main_content_inner").load("onmouseclick.html");
    $("#latest").click(function(){ // load page1 on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("testscript.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

そしてあなたの答えから：

$(document).ready(function(){
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

lolwut が示すように関数呼び出しを連鎖できることに注意してください。したがって$('#id').hide().load().fadeIn()、ページの読み込みが遅い場合にうまくいくかどうかは$('#id').hide().load(url,[callback w/fadeIn()])わかりませんが、ページが完全に読み込まれるのを待ってから、fadeIn() が起動します。

編集2：

元の投稿者が述べたコードの動作に関する問題のため、以下に含める html ファイルを作成し、それぞれに対して page#.html を作成しました。以下の投稿されたhtmlページは、jquery 1.4.4でテストしたとおりに機能します。

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    // load home page when the page loads
    $("#main_content_inner").load("home.html");

    $("#page1").click(function(){
        // load page1 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page1.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page2").click(function(){
        // load page2 in main_content_inner on click
        $("#main_content_inner").hide();
        $("#main_content_inner").load("page2.html", function(){
            $(this).fadeIn(5000);
        });
    });
    $("#page3").click(function(){
        // load page3 in main_content_inner on click
        $("#content").hide();
        $("#content").load("page3.html", function(){
            $(this).fadeIn(5000);
        });
    });
});

</script>

</head>
<body>
<span id="page1">Page 1</span>
<span id="page2">Page 2</span>
<span id="page3">Page 3</span>
<h4>Main Content Inner</h4>
<div id="main_content_inner"></div>
<h4>Content</h4>
<div id="content"></div>
</body>
</html>
于 2011-02-02T19:15:30.827 に答える
1

基本的に、トランジションを実行したい場合は、ロードしたいものの HTML を既に持っている必要があります。.load() のコールバックはすでに DOM を変更しているため、別の方法で取得する必要があります。ここでは AJAX が役立ちます。

作業例: http://jsfiddle.net/v6S8Z/3/

$('#loader').click(function(){
    $.ajax({
        type: 'get',
        url: 'http://fiddle.jshell.net',
        success: function(response){
            $('#main').fadeOut(function(){
                $('#main').html(''); // clear the contents - do not chain this with the next .html()
                $('#main').html(response); // add new contents - do not chain the next hide() as the element must be parsed in the DOM correctly first
                $('#main').hide().fadeIn(6000); // hide the added content, then fade in
            });
        }

    });
});
  • クリック時に ajax 経由でページをロードする
  • ajax が終了したらすぐに既存のコンテンツをフェードアウトする
  • .html() はコンテンツを設定し、すぐにページを非表示にします
  • .fadeIn() はページ内でゆっくりとフェードインします。

これは基本的にそれである必要があります。私は現在作業中なので、適切なセットアップ ページの詳細な例を示すことはできません。しかし、私はあなたがアイデアを得ると思います。

ただし、同じ Div 内のコンテンツを (光学的に) クロス フェードしたい場合 (たとえば、コンテンツ A が 100 から 0 にフェードし、コンテンツ B が 0 から 100 にフェードする)、それに応じて HTML を作成する以外に方法はありません。2 つの異なる「メイン」ラッパーを重ねて使用する必要があります。また、テキスト選択が機能し続けるように、読み込みごとに z-index を設定する必要があります。

これでうまくいくことを願っています。:)

最初はページを静的に構築することを強くお勧めします. とにかく、特に JS と CSS に慣れていない場合は、これは十分に困難です。しかし、それが適切に機能するようになるとすぐに、2 つの div に .load() を入力して、既存の遷移コードを使用することができます。

よろしくお願いします

于 2014-02-18T15:44:40.160 に答える