[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]

Napisałem Ci gotowca, sprawdź tylko w edytorze czy nie ma błędów w składni. Kod jest bardzo prosty, jeśli go nie rozumiesz to nic już na to nie poradzę. poniżej masz z komentarzami:

[HTML] pobierz, plaintext 
(function(){
 
       var runTextAnimation =  function(){
 
               var  $w1 = $('#word1'),    // pierwsze slowo
                      $w2 = $('#word2'),   //  drugie slowo
                       interval = 3000;      //  czas w ms co ile będą zmieniane slowa
 
               //reset
               $w1.html('lubimy');       // ustaw początkowe pierwsze słowo 
               $w2.html('eventy');       // ustaw początkowe drugie słowo 
 
               // no i teraz po kolei timeouty
 
               // po 3 sekundach, zmien slowo 1 na 'robimy'
               setTimeout(function(){  
                       $w1.html('robimy');
 
                       // po kolejnych  3 sekundach, zmien slowo 2 na 'fillmy'
                       setTimeout(function(){
                               $w2.html('filmy');
 
                               // po kolejnych 3 sekundach, zmien slowo 1 na 'lubimy'
                               setTimeout(function(){
                                       $w1.html('lubimy');
 
                                       // po kolejnych 3 sekundach wykonaj całą funkcje runTextAnimation na nowo i tak w kółko
                                       setTimeout(runTextAnimation, interval);
                               }, interval);
                       }, interval);
               }, interval);
       });
 
       runTextAnimation();  // uruchomienie funkcji
});
[HTML] pobierz, plaintext 

Ten post edytował gitbejbe 19.03.2017, 16:18:38