2014-02-21 2 views
0

я сумел выполнить задержку, а затем перевести на мой образ - то я хотел, чтобы повернуть его немного, как он двигался, так что я нашел способ, чтобы повернуть его здесь 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> 
+0

@phtrivier Здравствуйте, робот-обозреватель. Пожалуйста, прекратите делать редактирование отзывов без прочтения изменений. [Читать это] (https://www.grammarbook.com/punctuation/capital.asp). – Lundin

+0

@ Kimtho6 Привет, робот-рецензент. Пожалуйста, прекратите делать редактирование отзывов без прочтения изменений. [Читать это] (https://www.grammarbook.com/punctuation/capital.asp). – Lundin

ответ

0

Попробуйте использовать setTimeout(). Он используется для вызова метода по истечении заданного времени. Пример подходит для этого случая.

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

Более подробной информации о SetTimeout() здесь https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

+0

спасибо, что работает отлично – emoot

Смежные вопросы