Question

我希望在我的页面加载时使用jQuery淡入CSS页面背景图像。我知道可以使用jQuery设置CSS页面背景图像，并且当页面加载时也可以淡入文本，但我不知道如何同时执行这两种操作。

您可以通过执行以下操作在jQuery中设置CSS背景图像：

showBackground($("body").css({"background-image":"url(yourimage.jpg)"}));

您可以通过执行以下操作淡出文字：

$(document).ready(function(){
            $('#fade').hide();
            $('#fade').append('This text should fade in.');
            $('#fade').fadeIn();
});

Answer 1

您可以在页面加载时加载正文背景图像，但要淡化它，您需要使用其他一些操作，例如放置一个100％高度宽度的div来保存背景图像。我试过跟随它，它在文本和背景中淡化（在div中）。

<html>
<head>
    <script type="text/javascript" 
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script>
</head>
<body>
<div id="b" style="display:none;left:0;top:0;margin:0;padding:0;width:100% 
     !important; height:100% !important;
      background-image:url('DSC00667.jpg');z-index:-1000;">
</div>
<div style="top:0;left:0;position:absolute;">
    <div id="d" style="height:200px;width:500px;margin:0 auto;top:0;
        clear:none;z-index:100;">
        this is text div that will fade in.
    </div>
    <div style="clear:both;height:1px !important;">&nbsp;</div>
</div>
<script type="text/javascript">
    $(function(){
        $("#b").fadeIn();
        $('#d').hide().append('This text should fade in.').fadeIn();
    });
</script>
</body>
</html>

更少的样式元素也可以使用，但我还没有测试过。

使用jQuery在加载时淡入页面背景图像

1 个答案: