nagradzam tutoriale

  • FadeIn, fadeOut, fadeTo - czyli o pojawianiu się i znikaniu

    dodano 04.12.2007 / komentarzy: 1 / autor: palmiak

    W tym tutorialu pokażę Wam jak działają trzy efektowne funkcje jQuery, czyli fadeIn(), fadeOut oraz fadeTo(). Dodatkowo zaprezentuję gdzie można je zastosować w praktyce.

    fadeIn

    Funkcja fadeIn() służy do pokazywania obiektów. Wygląda ona następująco:
    $("nazwa_selektora_ktory_chcemy_pokazac").fadeIn("predkosc_pokazania")

    Co do prędkości to możemy użyć wartości slow, normal, fast lub podać czas trwania w milisekundach.

    W praktyce wygląda to następująco.

    A kod skryptu wygląda tak:

    $(document).ready(function(){
                            $("div").hide();

                            $("a.wolno").click(function () {
                                    $("div.tohidewolno").fadeIn("slow");
                                    return false;
                             });

                            $("a.szybko").click(function () {
                                    $("div.tohideszybko").fadeIn("fast");
                                    return false;
                             });
                    });

    fadeOut

    Ta funkcja służy do ukrywania. Jedyne czym różni się od poprzedniczki to tym, ze ta ukrywa. Składnia jednak jest bliźniacza:
    $("nazwa_selektora_ktory_chcemy_ukryć").fadeOut("predkosc_ukrywania")

    Nawet przykład użyjemy podobny. Tylko nie będziemy na początku nic ukrywać oraz zastąpimy fadeIn na fadeOut.

    $(document).ready(function(){
                            $("a.wolno").click(function () {
                                    $("div.tohidewolno").fadeOut("slow");
                                    return false;
                             });

                            $("a.szybko").click(function () {
                                    $("div.tohideszybko").fadeOut("fast");
                                    return false;
                             });
                    });

    Przykład

    A praktyka?

    Praktyczne zastosowanie obu funkcji pokazałem we wcześniejszym tutorialu dotyczącym miniaturek z opisami. Tam po najechaniu na obrazek za pomocą fadeIn pokazywał się opis, a po zjechaniu z obrazka znikał on za pomocą fadeOut.

    fadeTo

    FadeTo, w przeciwnieństwie do poprzedniczek lubi stany przejściowe. Za jej pomocą możemy sprawić, że wszystkie obrazki obrazki na stronie będą miały przezroczystość ustawioną na 50%.

    Składnia tej funkcji wygląda następująco:
    $(nazwa_selektora_ktoremu_chcemy_cos_zrobic).fadeTo("czas_trwania_efektu", do_jakiego_poziomu);

    czyli jeśli będziemu chcieli wszystkie obrazki na stronie ustawić na te 50% piszemy
    $("img").fadeTo("slow", .5);

    Zobaczcie sami: przykład

    FadeTo w praktyce

    FadeTo użyjemy do przyozdobienia małej galeryjki.

    Naszym zadaniem będzie najpierw ustawić obrazkom przezroczystość na 50%, a po najeździe przeroczystość stalić na 0.

    Tak to będzie wyglądać:

    $(document).ready(function() {
                    $("li").fadeTo("fast", .5);

                    $("li").hover(function(){
                            $(this).fadeTo("fast", 1);
                    },function(){
                            $(this).fadeTo("fast", .5);
                    });

                    });

    Jak to działa możecie zobaczyć tutaj.

    Zachęcam Was do zabawy z tymi funkcjami, bo odpowiednio połączone mogą wyglądać naprawdę efektownie, a co za tym idzie mogą upiększyć Waszą stronę.

    Komentarze / dodaj komentarz

    Napisz komentarz