0

我使用 css 创建了一个预加载器。我想在预加载器完成后在幻灯片中显示图像。预加载完成后，图像应该会平滑淡入。这是我的代码结构。

<!DOCTYPE html>
<html>
<head>
    <style>
        #container{
            display: block;
            margin: 0px auto;
        }
        #preloader {
            margin:10px;
            width:300px;
            height:1px;
            background:#e1e1e1;
        }
        .fillcolour {
            width:300px;
            height:1px;
            background:#888888;
            position:absolute;
            -moz-animation:fullexpand 5s ease-out;
            -webkit-animation:fullexpand 5s ease-out;
        }
        @-moz-keyframes fullexpand {
            0%  { width:0px;}
            100%{ width:175px;}
        }
        @-webkit-keyframes fullexpand {
            0%  { width:0px;}
            100%{ width:175px;}
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#preloader').fadeOut(2000);
            $('#container').css({'display':'block'}).fadeIn(3000);
        });
        $(window).load(function(){
            /*$('#preloader').fadeOut(2000).css({'opacity':0});
            $('.fillcolour').fadeOut(2000).css({'opacity':0});
            $('#container').css({'display':'block'}).fadeIn(3000);*/
        });
    </script>
    </head>
    <body>
    <div id="container" style="display:none;">
        <img src="1.jpg" style="width:300px;height:200px;"/>
    </div>
    <div id="preloader">
        <span class="fillcolour"></span>
    </div>
    </body>
</html>

任何人都可以帮忙吗？请！

4

1 回答 1

1

当您想要一个有序的拨打电话时，当一个操作完成时另一个开始。使用Jquery“完成”参数。

尝试

$(document).ready(function(){
        $('#preloader').fadeOut(2000, function(){    
            $('#container').css({'display':'block'}).fadeIn(3000);
           });    
    });
于 2013-03-07T08:12:12.770 回答