JQuery：遷移の効果を追加することができます

私はゆっくりと私の仕事を進め、さまざまなアプローチを試み続けています。JQuery：遷移の効果を追加することができます

簡単な質問...

はonclickの.LOADに.fadein .fadeout .slideup .slidedownなどのようなjqueryのアニメーション効果を追加することが可能です。

リンクをクリックすると、指定した領域にページがロードされますが、このロードに効果をどのように結びつけるかはわかりません。

提案がありますか？

EDIT：コード例：

$(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"); 
    }); 
});

EDIT：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ドキュメントを読み込みます。私はこれをやりたいと思っていますが、移行しています。

ドキュメントの特定のコンテンツにjavascriptを挿入したときに見つかったため、ドキュメントの特定のコンテンツを読み込むのではなく、HTMLドキュメント全体を読み込み、メインページのjavascript twitterのつぶやき）wouldnt show。しかし、私は別にhtmlファイルを開いたときに正常に動作するので、ajaxはメインページの私のコンテンツdivにjavascriptをロードするようだ。

このコードを私のニーズに合わせてより実用的にするための提案は...私は批判に向けて、特にそれはすべて学習に関するすべてのものとして公開しています。

おかげ

出典

2011-02-02 fenelle Kuye-Thomas

$('.element').click(function() 
{ 
    $('.load').load('url').hide().fadeIn('slow'); 
});

出典

2011-02-02 19:14:54 MacMac

おかげで、かなり初心者 $（ドキュメント）.ready（関数（）{// \t負荷家。ページがロードされるときのhtmlページ \t $（ "＃main_content_inner"）。load（ "home.html"）; \t $（ "＃1ページ1"）をクリックします（関数（）{クリックで \t //ロードページ1を \t \t $（ "＃のmain_content_inner"）負荷（ "page1.html"）;。 \t}）; \t $（ "＃最新"）をクリックします（（機能）{ \t //が#latest $（ "＃のmain_content_inner"）をクリックする上で、最新のロードロード（ "latest.html"）;。 \t}）; \t これは、使用しているコーディングのタイプの例です。あなたの答えをお寄せください。申し訳ありませんが、abit messyこのコメントボックスは、コードを書式設定するのには良いです。 –

コメントを書くのではなく、質問にコードを戻してください。 :) –

あなたがページの読み込みが完了した後に何かをしようとしている場合は$（ドキュメント）.ready（）をするつもりです。

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

あなたは準備ができて使用（）と（ロードされない理由は）HTMLが解析されたときに負荷が（）が発生、ということですが、ドキュメントオブジェクトモデル（DOM）の前にJS何をしている、準備ができていますページ（DOM）コンテンツを操作するために使用されます。たとえば、実際のコンテンツ（要素/クラス/構造の追加/削除/操作、ライトボックスやその他のプラグインの初期化、エフェクトなど）を操作するために、ブラウザが提示する内容を調整したいときにはready（）。

だから、私はあなたが記述していると思うことはある：

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

EDIT：あなたはコールバック関数を実行したい：

$(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(url,[callback w/fadeIn()])は、ページが完全に読み込まれるのを待ってからfadeIn（）が呼び出されるまで、$('#id').hide().load().fadeIn()が動作するかどうかわかりません。

EDIT 2：

ためのコードが動作するようになって元のポスターの述べた問題に、私はそれぞれのために作成したページ＃の.htmlをするのと、私は以下が含まhtmlファイルを、作成しました。私がjquery 1.4.4でテストしたように、下に掲載されたhtmlページが動作します。

<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-02 19:15:30

返事ありがとう、そうですね。そこにそれがあります –

特定のスクリプトに問題がある場合は、問題の影響を受けるHTMLコンテンツを投稿してください。あなたが尋ねたことは少し曖昧です。 –

iframeまたはAJAXに何かをロードしようとしていますか？ –

基本的に、トランジションを実行するには、読み込みたいもののHTMLが必要です。 .load（）のコールバックは既にDOMを変更するので、別の方法で取得する必要があります。 AJAXはここで便利です。

実施例：クリック

既存のコンテンツフェードアウトとすぐにAJAXが終了するよう

.htmlの上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 
      }); 
     } 

    }); 
});

ロードページ（）は、コンテンツを設定し、直ちにページを非表示にします。
.fadeIn（）はページ内でゆっくりとフェードします。

これは基本的にはそうです。私は現在作業中ですので、適切な設定ページで詳細な例を示すことはできません。しかし、私はあなたがその考えを得ると思う。

ただし、（光学的に）SAME Divにコンテンツをクロスフェードしたい場合（たとえば、コンテンツBが0から100までフェードする場合、コンテンツAは100から0にフェードします）、ビルドする以外にはありませんそれに応じてHTML。 2つの異なる「メイン」ラッパーを重ねて使用する必要があります。そして、テキスト選択が機能し続けるように、各負荷にZ-インデックスを設定する必要があります。

これはあなたが行くことを望みます。 :)

最初は静的にページを構築することをお勧めします.2つのコンテンツdivがお互いに重なり合い、互いに重なり合うようになります。これはとにかく、JSやCSSでうまく解決されていない場合は特に難しいです。しかし、正常に動作するとすぐに2つのdivに.load（）を設定し、既存のトランジションコードを使用することができます。

ここで迅速な応答のためによろしく

出典

2014-02-18 15:44:40 user2390733

JQuery：遷移の効果を追加することができます

答えて

関連する問題