[JavaScript]Animacja tekstu JS Opcje

[SiNUSxEK]

Witam, głównie chodzi mi o prostą animację tekstu, ma ona działać następująco:

Wyświetlony jest napis np. Lubimy Eventy po upłynięciu 3 sekund słowo "Lubimy" zamienia się w Robimy, natomiast słowo Eventy zostaje niezmienione i znowu sytuacja się powtarza po upłynięciu kolejnych 3 sekund słowo "Robimy" zostaje niezmienione, ale słowo Eventy zamienia się w Filmy, mijają kolejne 3 sekundy i słowo Robimy zmienia się w "Lubimy" a słowo Filmy zostaje niezmienione, po tych czynnościach animacja leci od nowa. JS jeszcze nie ogarniam za bardzo i mam na razie coś takiego:

[HTML] pobierz, plaintext 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.4.2'></script>
<h1>
<span id="word1"></span>
<span id="word2"></span>
</h1>
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
h1 {
  font-size:50px;
  text-align:center;
  font-family: Arial;
  padding: 10% 0;
}
#word1 {
  color: black;
}
#word2 {
  color:red;
}
[HTML] pobierz, plaintext 

[PHP] pobierz, plaintext 
(function(){
      var words = [
          'Filmy'
          ], i = 0;
      setInterval(function(){
          $('#word2').fadeOut(function(){
          $(this).html(words[i=(i+1)%words.length]).fadeIn();
          });
      }, 6000);
        var words = [
          'Eventy'
          ], i = 0;
      setInterval(function(){
          $('#word2').fadeOut(function(){
          $(this).html(words[i=(i+1)%words.length]).fadeIn();
          });
      }, 6000);
 
  })();
(function(){
      var words = [
          'Lubimy',
          'Robimy'
          ], i = 0;
      setInterval(function(){
          $('#word1').fadeOut(function(){
              $(this).html(words[i=(i+1)%words.length]).fadeIn();
          });
      }, 3000);
 
  })();
[PHP] pobierz, plaintext 

[gitbejbe]

Masz szczescie bo jade wlasnie w pociagu i mam czas na bzdety.

[HTML] pobierz, plaintext 
(function(){
 
       var runTextAnimation =  function(){
               var  $w1 = $('#word1'),
                      $w2 = $('#word2'),
                       interval = 3000;
 
               // ustaw poczatkowe slowa
               $w1.html('lubimy');
               $w2.html('eventy');
 
               setTimeout(function(){
                       $w1.html('robimy');
                       setTimeout(function(){
                               $w2.html('filmy');
                               setTimeout(function(){
                                       $w1.html('lubimy');
                                       setTimeout(runTextAnimation, interval);
                               }, interval);
                       }, interval);
               }, interval);
       }):
 
       runTextAnimation();
});
[HTML] pobierz, plaintext 

Animacje sobie dopiszesz, nie mam sily juz pisac na telefonie - moga byc byki w skladni. Przyklad bardzo prosty, a co do Twojego kodu - powiem bardzo delikatnie, poprostu usun i nie grzesz wiecej

Ten post edytował gitbejbe 17.03.2017, 21:49:03