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:
h1 { font-size:50px; text-align:center; font-family: Arial; padding: 10% 0; } #word1 { color: black; } #word2 { color:red; }
(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); })();