jQuery: zmieniający się płynnie tekst

Autor: Arkadiusz Tobiasz 8 marca 2010

Dzisiaj chciałem pokazać Wam jak za pomocą jQuery można uzyskać efekt zmieniającego się płynnie tekstu. Rozwiązanie to wykorzystywane jest na wielu serwisach, zazwyczaj w połączeniu z obrazkiem (jak na tym blogu). Ja skupię się na wyświetlaniu samego tekstu.

Rozpoczniemy tradycyjnie od naszego głównego pliku, w którym dołączymy trzy skrypty JavaScript oraz arkusz stylu CSS:

1
2
3
4
<link href="style.css" media="screen" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="timer.js"></script>
<script type="text/javascript" src="core.js"></script>

Nasz plik stylu wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
*{
    margin:0px;
    padding: 0px;
    outline: 0px;
}

html,body{
    height: 100%;
    font-family: Verdana;
    color: gray;
    font-size: 11px;
}

#main{
    width: 980px;
    margin:0 auto;
    overflow: hidden;
    padding-bottom: 10px;
}

ul#tabs{
    height: 50px;
    overflow: hidden;
    display: block;
    margin-top: 0px;
    margin-left: 200px;
}

ul#tabs li{
    display: none;
    font-size: 12px;
}

Najważniejszy tutaj są style definiujące wypunktowanie oznaczone identyfikatorem tabs, bowiem teksty, które mają się zmieniać będą umieszczone w tej liście. Następnie załączamy aktualną bibliotekę jQuery (do pobrania stąd) oraz plugin jQuery.timers jako timer.js. Plugin ten będzie wykorzystywany do odliczania czasu do kolejnej zmiany tekstu. Nasza funkcja odpowiedzialna za płynną zmianę tekstu zawarta jest w pliku core.js, który wygląda następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){
 
    $(".active_tab").css("display", "block");
   
    $(document).everyTime(2500, function(i) {
       
        $(".active_tab").fadeOut("normal", function(){

            if($(".active_tab").next("li").html() == null)
            {
                $(".active_tab").removeClass("active_tab");
                $("#tabs > li:first").addClass("active_tab");
                $(".active_tab").fadeIn("normal"); 
            }
            else
            {
                $(".active_tab").removeClass("active_tab").next("li").addClass("active_tab");
                $(".active_tab").fadeIn("normal");         
            }
               
        });

    });
});

Funkcja wyświetla aktualny element listy, który posiada odwołanie do klasy css active_tab, po upływie założonego czasu element jest za pomocą funkcji fadeOut() chowany, a klasa css active_tab usuwana z aktualnego elementu listy i dodawana do kolejnego elementu listy. W przypadku braku kolejnego elementu jest dodawana do pierwszego. Ostatnim etapem jest wyświetlenie kolejnego elementu listy za pomocą funkcji fadeIn().

Powyższy skrypt wykorzystujemy tworząc zwykłe wypunktowanie z identyfikatorem tabs, czyli wygląda to tak:

1
2
3
4
5
6
<ul id="tabs">
    <li style="display: none;" class="">Tekst 1</li>
    <li style="display: none;" class="">Tekst 2</li>
    <li style="display: none;" class="">Tekst 3</li>
    <li style="display: list-item;" class="active_tab">Tekst 4</li>
</ul>

Jako pierwszy wyświetlany jest ostatni element listy, a następnie kolejno pierwszy, drugi, trzeci, ostatni i znów od początku. Działanie skryptu możecie zobaczyć tutaj.

komentarzy 10

  1. factumest napisał(a):

    …trochę w ie źle działa. Ja wiem, że to jest do du..y przeglądarka, ale jednak… Chodzi mi o płynność operacji. W ie skacze.

  2. Spanie24 napisał(a):

    Brak demo …szkoda!

  3. pinger napisał(a):

    nie ma demo lipaaaa

  4. Mat napisał(a):

    Witam,
    Spoko poradnik 🙂
    Tylko jeżeli w skrypt wstawie więcej tekstu np. zamiast „1” „mama poszła kupić chleb i boczek” po dłuższym czasie się sypie i wyświetla kilka naraz ;/

  5. Adi napisał(a):

    Fajny poradnik spróbuję się z tym pobawić:)

  6. Adi napisał(a):

    A co trzeba zmienić żeby ta zmiana była wolniejsza?

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]