javascript - JavaScript 変更ページ効果

Question

こんにちは、JavaScriptでフェードインフェードアウトの変更ページ効果を行う方法を知っている人はいますか?

私はこれを試しました..

しかし、フェードアウトがリンクしていない場合..上記のウェブサイトのように滑らかではありません。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>





<script type="text/javascript">

$(document).ready(function() {

$('body').css('display', 'none');

$('body').fadeIn(1000);



$('.link').click(function() {

event.preventDefault();

newLocation = this.href;

$('body').fadeOut(2000, newpage);

});

function newpage() {

window.location = newLocation;

}

});
</script>

申し訳ありませんが、考えてみてください....背景のスライドショーは機能しますか??? しかし、その上に php/html コードを追加できますか?

別の例... http://www.louisebradley.co.uk/portfolio/

score 0 · Accepted Answer

ちょっと下のコードを試してください

WORKING DEMOを見る

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="jquery.js"></script>
        <script type="text/javascript">

        function Close()
        { 
            $('#div1').animate({ height: 50 });
        }

        function Open()
        { 
            $('#div1').animate({ height: 100 });
        }
        </script>
    </head>
    <body>

        <div id="div1" style="width:100%; height: 50px; background-color: #C0C0C0;" onmouseover="Open()" onmouseout="Close()"></div>
</body>


</html>

そちらの商品もご覧ください

ページの読み込み時に div をフェードインする

JavaScript フェードチュートリアル – 要素のフェードイン/アウト

方法: JavaScript フェードインフェードアウトテキスト

.fadeIn() チュートリアル