0

///////////////////////////

これは私にとって本当に悪いアプローチでした。多くの微調整の後、外部ページを同時にロードするよりも、一度にすべての外部要素 (html) をロードし、クリック時にのみフェードイン効果を適用する方が良いという結論に達しました。以下のアプローチでは、スムーズなフェードイン効果が得られず、外部ページの読み込み中に遅延が発生しました。

///////////////////////////

次の方法で外部ページを読み込んでいます。

$('a').click(function() {
$('#result').load($(this).attr('href'));

return false;
});

そして、外部ページをfadeInで読み込もうとしています。

私は他の答えを見てきましたが、どれも私にとってはうまくいきません。おそらく、私は答えを正しく理解していないか、間違って適用しています。私の最善の努力 (無数の試行の後) はこれまでのところですが、これは最初に div #one でフェードインし、次に単純に #load をロードします。（ローディングdiv自体にフェード効果を適用できないことを理解しているため、このようにしました。） 

$("a").click(function () {
$("#one:hidden:first").fadeIn("slow");
$('#load').load($(this).attr('href'));

return false;
});

私はjQueryを初めて使用しますが、これは私以外のすべての人にとって非常に簡単なことかもしれません。

助けていただければ幸いです。ありがとう。

/////////////////////マークアップはこちら///////////////////

<a href="./test.html" class="link">Load Page 1</a>

<div id="one">

<div id="load">load here</div>


</div>

/////////////////////////////////////////////// ///////////

4

1 に答える 1

1 
<a href="./test.html" class="link">Load Page 1</a>

<div id="one" class="slot">
  <div id="load">load here</div>
</div>

最初にdivを非表示にする

.slot{
 display:none;
}

外部コンテンツをロードする

   $(".link").click(function (e) {
     e.preventDefault();      
    var $urlToLoad = $(this).attr('href');  
    $('#load').load($urlToLoad, function(data){
        $("#one").fadeIn('slow');
    });      
});

デモ

于 2013-03-13T19:43:23.887 に答える