jQuery: zmieniający się płynnie tekst

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.

Comments

factumest

…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.

Reply
Spanie24

Brak demo …szkoda!

Reply
pinger

nie ma demo lipaaaa

Reply
Mat

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 ;/

Reply
Adi

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

Reply
Adi

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

Reply
    Arkadiusz Tobiasz

    Zwiększyć wartość z 2500 w tej linijce

    1
    $(document).everyTime(2500, function(i) {
    Reply

Leave a Comment

one × 1 =