Скрыть div и показать еще один, когда стиль первого div = 100%

Question

У меня есть домашняя страница, в которой есть загрузочная панель, предназначенная для шоу. То, что я хотел бы произойти, это когда стиль загрузочной панели 100%, скрыть div «метр» и показать div хорошо. Если это возможно, пожалуйста, помогите !! Это можно сделать либо в css, либо в javascript, пожалуйста! Спасибо, ребята, так много, и нет, это НЕ ОЧЕНЬ конкретное, потому что я позволяю другим иметь возможность реализовать панель загрузки всплеска, которая скрывается при завершении. Вся помощь очень ценится, так как это довольно актуально !!! Большое спасибо! Просто попросите другие файлы, которые вы хотели бы видеть, чтобы ответить на вопрос! Главная

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

Answer 1

Если я вас правильно понимаю, вы можете использовать .animate() функцию обратного вызова, как это:

$(this) 
    .animate({ 
     width: $(this).data("origWidth") 
    }, 3000, function() { 
     alert("EXECUTES WHEN THE ANIMATION HAS FINISHED"); // replace with your needs 
    }); 

Answer 2

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" 
        } 
       ); 
     }); 
    });