延迟后如何平移和旋转答案

【问题标题】：how to translate and rotate after a delay延迟后如何平移和旋转
【发布时间】：2014-03-22 23:11:08
【问题描述】：

我已经设法完成延迟，然后在我的图像上进行平移 - 然后我想在它移动时稍微旋转它，所以我找到了一种从这里旋转它的方法 https://code.google.com/p/jqueryrotate/

所以我设法应用了它，但结果是旋转忽略了延迟和翻译我尝试了几种将功能组合在一起的方法，但不确定最好的方法是什么。

我只会使用 css 转换，但理想情况下我需要它在 IE7 中工作。

我可以试试更简单的方法吗？

      <!doctype html>
                    <html lang="en">
                    <head>
                        <meta charset="UTF-8">
                        <title>Document</title>





                    </head>

                    <style>

                        .hold{
                            width:250px;
                            height: 400px;
                            margin: 0 auto;
                            background: #eee;
                            position: relative;
                        }
                        .pos{
                            position: absolute;
                        }
                        .ccard{
                            width:250px;
                            height: 400px;
                            background: red; 

                        }
                        .rcard{
                            width:250px;
                            height: 400px;
                            background: blue; 
                            left:0px;
                        }
                        .lcard{
                            width:250px;
                            height: 400px;
                            background: green; 
                            left:0px;
                        }


                    </style>
                    <body>

                        <div class="hold">


                            <div class="lcard pos" style="left:0px;">

                            </div>

                            <div class="rcard pos">

                            </div>

                            <div class="ccard pos">

                            </div>



                        </div>



                    </body>



                    <script src="http://code.jquery.com/jquery-latest.min.js"
                    type="text/javascript"></script>
                    <script type="text/javascript" src="js/jquery.transform-0.9.3.min_.js"></script>
                    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
                    <script type="text/javascript" src="js/jQueryRotate.js"></script>


                    <!-- Jumping Animation -->
                    <script type="text/javascript">
                        $(function(){
                            $('.lcard').delay(2600).animate({'top': '-12px', 'left': '100px'}, 800,'easeOutQuart');
                            $('.rcard').delay(2600).animate({'top': '-12px', 'left': '-100px'}, 800,'easeOutQuart');



                        });


                        var rotation = function (){
                            $(".lcard").rotate({
                                angle:0, 
                                animateTo:20, 

                            });
                        }
                        rotation();


                    </script>
                    </html>

【问题讨论】：

@phtrivier 你好，机器人审阅者。请停止编辑评论而不阅读更改。 Read this.
@Kimtho6 你好，机器人审阅者。请停止编辑评论而不阅读更改。 Read this.

标签： javascript jquery rotation translate-animation

【解决方案1】：

尝试使用 setTimeout()。它用于在指定时间后调用方法。适合这种情况的示例。

setTimeout(function() {
    $(".lcard").rotate({
        angle:0, 
        animateTo:20, 
    });
}, 2600);

更多关于 setTimeout() 的信息在这里https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

【讨论】：