Javascriptが私はdiv要素の中に外部のローカルページをロードし、このコードを持って積載本部

Question

にフェードインを追加しますか？

<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 

そして、あなたのjsファイルにmyDiv上.fadeIn（）メソッドを使用します。それはそうするための最も簡単な方法は、あなたのhtmlのjQueryに追加することです

Answer 1

this answerにnice fadeIn関数があり、それをあなたのロード関数に適用しました。

Fiddle

function load(url) { 
    var myDiv = document.getElementById("myDiv"); 
    myDiv.innerHTML='<object type="text/html" data="'+url+'"></object>'; 
    fadeIn(myDiv); 
    return false; 
} 

function fadeIn(el) { 
    el.style.opacity = 0; 
    var tick = function() { 
    el.style.opacity = +el.style.opacity + 0.01; 
    if (+el.style.opacity < 1) { 
     (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16) 
    } 
    }; 
    tick(); 
} 

load('foo'); 

Answer 2

純粋ジャバスクリプトだった場合、私は好むだろう。 あなたは.jsファイルをリンクする前に

Answer 3

ファイルのjQueryをリンクすることを忘れないでくださいそれとも、jQueryのCSSのアニメーションクラスを作成し使用できない場合：

var el = document.querySelector('.js-fade'); 
if (el.classList.contains('is-paused')){ 
el.classList.remove('is-paused'); 
} 

：その後、

@keyframes fadeIn { 
to { 
    opacity: 1; 
    } 
} 

.fade-in { 
    opacity: 0; 
animation: fadeIn .5s ease-in 1 forwards; 
} 

.is-paused { 
    animation-play-state: paused; 
} 

をし、jsの中にこのコードを使用

最後に行うべきことは、myDivクラスのjs-fadeとfade-in is-pausedに追加することです。 上記のコードは一般的ですので、あなたのニーズに合わせて調整してください。