如何在JQuery中延迟动画?

时间:2015-08-04 08:07:47

标签: jquery

所以基本上我有这个代码:

<a href="javascript:window.open(window.clickTag)" style="color:#000000">
    <div style="width:300px; height:250px; z-index:4; border:2px solid #6aa5fa; background-color:#2d2d2d; position:fixed;" class="click-layer" id="clickLayer">
        <div class="resized-splitflap">Dublin</div>



    </div>
</a>


<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/jquery.splitflap.js"></script>
<script>
    (function ($) {
        $(document).ready(function () {

            var ratio = 0.5;
            $('.resized-splitflap')
                    .splitFlap({
                        charWidth:  25 * ratio,
                        charHeight: 50 * ratio,
                        imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
                    });
        });
    })(jQuery);
</script>

目前这段代码的作用是,一旦页面加载,它就会翻转字符,但是我希望它在几秒钟之后完成,然后说10,那么我将如何继续实现这一目标呢?感谢。

1 个答案:

答案 0 :(得分:2)

您可以像这样使用window.setTimeout()

$(document).ready(function () {
    window.setTimeout(function(){
        var ratio = 0.5;
        $('.resized-splitflap').splitFlap({
            charWidth:  25 * ratio,
            charHeight: 50 * ratio,
            imageSize:  (1250 * ratio) + 'px ' + (50 * ratio) + 'px'
        });
        }, 10 * 1000);
  });