2015-08-05 4 views
0

У меня есть этот код, который я получил от Github, и на данный момент он делает то, что он вызывает функцию один раз, а затем останавливается, но я хочу, чтобы он повторялся 3 раза и в течение этих 3-х раз хотел, чтобы у него была задержка вроде 10 секунд.Как я могу повторить эту функцию/анимацию JQuery?

Я попытался использовать setInterval, но это не сработало. Когда я пытаюсь вставить setInterval в код, второй раз, когда он пытается сделать анимацию, он не работает должным образом. Так вы могли бы помочь мне?

Вот ссылка на jsfiddle

HTML код:

<div class="resized-splitflap sixthAnimation"> London </div> 
<div class="resized-newyork sixthAnimation"> New York </div> 
<div class="resized-dublin sixthAnimation"> Dublin </div> 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script> 
(function ($) { 
$(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' 
     }); 

      $('.resized-newyork').splitFlap({ 
      charWidth: 25 * ratio, 
      charHeight: 50 * ratio, 
      imageSize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px' 
     }); 
        $('.resized-dublin').splitFlap({ 
      charWidth: 25 * ratio, 
      charHeight: 50 * ratio, 
      imageSize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px' 
     }); 
     }, 1 * 1000); 
    }); 
    })(jQuery); 
    </script> 

ответ

0

С OnComplete случае вы можете:

var ratio = 0.3; 
    $('.resized-splitflap').splitFlap({ 
     charWidth: 25 * ratio, 
     charHeight: 50 * ratio, 
     imageSize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px', 
     onComplete: function() { 

      $('.resized-newyork').splitFlap({ 
       charWidth: 25 * ratio, 
       charHeight: 50 * ratio, 
       imageSize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px', 
       onComplete:function() { 

       $('.resized-dublin').splitFlap({ 
        charWidth: 25 * ratio, 
        charHeight: 50 * ratio, 
        imageSize: (1250 * ratio) + 'px ' + (50 * ratio) + 'px' 
       }); 
       } 
      }); 
     } 
    }); 

Это странно вложенная функция кода, но это работает.

Редактировать

Как я уже сказал, он работает. Смотрите эту скрипку:

http://jsfiddle.net/pr2amqsp/1/

+0

Не могли бы вы дать мне в Js скрипку пожалуйста :) –

+0

я на мобильном телефоне сейчас, я не могу. Вы проверили это? Желаю работать –

+0

Я попробовал, но это не сработало. поэтому я не знаю, что я делаю что-то неправильно. Но когда у вас есть время, вы можете предоставить мне код в js скрипке? :) –

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