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の「complete」パラメータを使用します。

試す

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