JavaScript改变页面效果

嗨，有谁知道如何在 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/

最佳答案

嘿，试试下面的代码

查看其 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>

另外看看这些东西

<强> Fade in div on page load

<强> JavaScript Fade Tutorial – Fading Elements In/Out

<强> How to: javascript fade in fade out text

.fadeIn() Tutorial

关于JavaScript改变页面效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18117682/