アニメーションと私はそれが数ミリ秒のためにアニメーション化するように、時間遅延を追加し、監督の次のページへゆっくりとリダイレクトする方法をアニメーション<br> ためanimate.cssを使用している

Question

次の画像へリダイレクトするために時間遅延を追加

<div class="row-fluid" id="animatetransport"> 
     <div id="industry" class="leftbg col-sm-6 col-xs-6" style="height: 100%"> 
      <div class="imgwrapperleft"> 
       <h1 id="industry" class="text-center">INDUSTRY</h1> 
       <!--<a href="industry/index.html"> <img src="images/factory.png" class="img-responsive"></a>--> 
      </div> 
     </div> 
     <img src="images/logo.png" class="logo"> 
     <div class="rightbg col-sm-6 col-xs-6" style="height: 100%; "> 
      <div class="imgwrapperright"> 
       <h1 id="transport" class="text-center">TRANSPORTATION</h1> 
       <!--<a href="industry/index.html"><img src="images/excavator.png" class="img-responsive"></a>--> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#transport").click(function(){ 
     /*alert("The paragraph was clicked.");*/ 
     $('#animatetransport').addClass("animated slideInLeft").delay(8000); 
     window.location.href = "industry/index.html"; 

     }); 
     }); 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
     $("#industry").click(function(){ 
     /*alert("The paragraph was clicked.");*/ 
     $('#animatetransport').addClass("animated slideInLeft"); 
     window.location.href = "industry/index.html"; 

     }); 
     }); 
    </script> 

Answer 1

使用setTimeout。

$('#animatetransport').addClass("animated slideInLeft"); 
setTimeout(function() { 
    window.location.href = "industry/index.html"; 
}, 8000); 

Answer 2

window.location.hrefの変更をsetTimeoutに入れた場合、指定されたミリ秒数だけ遅延します。この目的のために

setTimeout(function(){ window.location.href = "industry/index.html"}, 500);