Question

我已经将animate.css用于动画
如何添加时间延迟使其动画几毫秒并缓慢重定向到下一页定向

<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

如果将window.location.href更改放入setTimeout，则会延迟指定的毫秒数。

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

Answer 2

为此目的使用setTimeout。

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

添加时间延迟以设置动画并重定向到下一个图像

2 个答案: