Question

嗨，任何人都知道如何在JavaScript中淡出淡出更改页面效果？

喜欢这个.. 的 http://soulwire.co.uk/hello

我试过了..

但是当fadeout没有链接在一起时......我的意思是不像上面的网站那样流畅。

<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/

Answer 1

嘿，请尝试下面的代码

请参阅 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更改页面效果

1 个答案: