how to translate and rotate after a delay

StackOverflow https://stackoverflow.com/questions/21934404

سؤال

I have managed to accomplish a delay and then translate on my image - then I wanted to rotate it a little as it moved, so I found a way to rotate it from here https://code.google.com/p/jqueryrotate/

So I managed to apply it but the outcome is that the rotation ignores the delay and the translate I've tried a few ways to combine the functions together but not sure how the best way to do it is.

I would just use css transforms but ideally I need it to work in IE7.

Is there a more simple way I can try?

      <!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>
هل كانت مفيدة؟

المحلول

Try using setTimeout(). It's used to call a method after a specified time. Example suitable for this case.

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

More information on setTimeout() here https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top