0

表示用の読み込みバーがあるホームページがあります。私がしたいのは、読み込みバーのスタイルが 100% のときに、div の「メーター」を非表示にして、div をよく表示することです。これは、CSS または JavaScript で可能ですか?

完了すると非表示になるスプラッシュ ローディング バーを他のユーザーが実装できるようにしているため、これはあまり具体的ではありません。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home Page</title>
<link rel='stylesheet' href='loadingbar/css/style.css'>
<link rel='stylesheet' href='slidetoopen/css/style.css'>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'></script>
    <script src='slidetoopen/js/slidetounlock.js'></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script>
        $(function() {
            $(".meter > span").each(function() {
                $(this)
                    .data("origWidth", $(this).width())
                    .width(0)
                    .animate({
                        width: $(this).data("origWidth")
                    }, 3000);
            });
        });
    </script>

    <style>
        .meter { 
            height: 20px;  /* Can be anything */
            position: relative;
            margin: 60px 0 20px 0; /* Just for demo spacing */
            background: #555;
            -moz-border-radius: 25px;
            -webkit-border-radius: 25px;
            border-radius: 25px;
            padding: 10px;
            width:350px;
            -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
            -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
            box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
        }
        .meter > span {
            display: block;
            height: 100%;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            background-color: rgb(43,194,83);
            background-image: -webkit-gradient(
              linear,
              left bottom,
              left top,
              color-stop(0, rgb(43,194,83)),
              color-stop(1, rgb(84,240,84))
             );
            background-image: -moz-linear-gradient(
              center bottom,
              rgb(43,194,83) 37%,
              rgb(84,240,84) 69%
             );
            -webkit-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            -moz-box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            box-shadow: 
              inset 0 2px 9px  rgba(255,255,255,0.3),
              inset 0 -2px 6px rgba(0,0,0,0.4);
            position: relative;
            overflow: hidden;
        }
        .meter > span:after, .animate > span > span {
            content: "";
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
            background-image: 
               -webkit-gradient(linear, 0 0, 100% 100%, 
                  color-stop(.25, rgba(255, 255, 255, .2)), 
                  color-stop(.25, transparent), color-stop(.5, transparent), 
                  color-stop(.5, rgba(255, 255, 255, .2)), 
                  color-stop(.75, rgba(255, 255, 255, .2)), 
                  color-stop(.75, transparent), to(transparent)
               );
            background-image: 
                -moz-linear-gradient(
                  -45deg, 
                  rgba(255, 255, 255, .2) 25%, 
                  transparent 25%, 
                  transparent 50%, 
                  rgba(255, 255, 255, .2) 50%, 
                  rgba(255, 255, 255, .2) 75%, 
                  transparent 75%, 
                  transparent
               );
            z-index: 1;
            -webkit-background-size: 50px 50px;
            -moz-background-size: 50px 50px;
            -webkit-animation: move 2s linear infinite;
               -webkit-border-top-right-radius: 8px;
            -webkit-border-bottom-right-radius: 8px;
                   -moz-border-radius-topright: 8px;
                -moz-border-radius-bottomright: 8px;
                       border-top-right-radius: 8px;
                    border-bottom-right-radius: 8px;
                -webkit-border-top-left-radius: 20px;
             -webkit-border-bottom-left-radius: 20px;
                    -moz-border-radius-topleft: 20px;
                 -moz-border-radius-bottomleft: 20px;
                        border-top-left-radius: 20px;
                     border-bottom-left-radius: 20px;
            overflow: hidden;
        }

        .animate > span:after {
            display: none;
        }

        @-webkit-keyframes move {
            0% {
               background-position: 0 0;
            }
            100% {
               background-position: 50px 50px;
            }
        }

        .orange > span {
            background-color: #f1a165;
            background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
            background-image: -webkit-linear-gradient(#f1a165, #f36d0a); 
        }

        .red > span {
            background-color: #f0a3a3;
            background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
            background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
        }

        .nostripes > span > span, .nostripes > span:after {
            -webkit-animation: none;
            background-image: none;
        }
    </style>
<style>
    body {
    background:url(bg.jpg);
    background-repeat:repeat-x repeat-y;
}

.main {
    width: 900px;
    margin: 0 auto;
    background-color:#FFF;
    height:700px;
    color:#666;
    margin-top:40px;
}

.main h1 {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align:center;
}
.main p {
    font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-align:center;
}

.center {
    margin-left:260px;
}
</style>
</head>

<body>
<div class="main">
<h1>Welcome!</h1>
<p>Please wait for the page to load:</p>
<div class="center">
<div class="meter orange nostripes" style="margin-top:30px;">
    <span style="width: 100%"></span>
</div>
</div>

<div id="well">
<h2><strong id="slider"></strong> <span>slide to enter</span></h2>
</div>

</div>
</body>
</html>
4

2 に答える 2

0

私があなたを正しく理解していれば、次のように .animate() コールバック関数を使用できます。

 $(this)
   .animate({
      width: $(this).data("origWidth")
     }, 3000, function() {
         alert("EXECUTES WHEN THE ANIMATION HAS FINISHED"); // replace with your needs
     });
于 2013-07-11T13:30:31.847 に答える
0

animate()completeアニメーションが完了したら実行/呼び出す関数を指定するパラメーターがあります。

何かのようなもの：

$(function() {
        $(".meter > span").each(function() {
            $(this)
                .data("origWidth", $(this).width())
                .width(0)
                .animate({
                    width: $(this).data("origWidth")
                }, 3000
                , 'swing'
                , function() {
                    $('.meter').hide();
                    $('.well').show(); // I'm not sure if this is what you meant by, 'show the div well' because you put "meter" in quotes, but not "well"
                  }
                );
        });
    });
于 2013-07-11T13:25:25.497 に答える