slideUp, slideDown, slideToggle
funkcje te pozwalaja na wysunięcie/zsunięcie dowolnego elementu

Za przykład posłuży mi dzisiaj wysuwany shoutbox - element coraz popularniejszy na blogspocie. jQuery będzie tutaj dobra alternatywa dla CSS’a, jeśli chcemy, by shoutbox był wydoczny na stronie nie tylko, kiedy najedziemy na niego myszka, ale cały czas - a właściwie do tej pory, aż nie zechcemy go schować. Jak to wyglada w praktyce? Efekt końcowy widzicie tutaj, a tymczasem zabieramy się do pracy, żeby go osiagnać. Załóżmy roboczo, że kod naszego shoutboxa to "XXX". W układzie bloga dodajemy widget HTML (ja będę się posługiwała oznaczeniem HTML1, jednak pamiętajcie, że jeśli macie już na blogu widget HTML, kolejny dodany będzie miał inny numer) i wklejamy do niego następujacy kod: <div id='shoutbox'> <div id='hide'>ukryj shoutbox</div> XXX </div> Zapisujemy nasz widget i przechodzimy do edycji kodu HTML. Wyszukujemy w arkuszu pozycję /body i nad nia wklejamy poniższy kod: <div id='show'>pokaż shoutbox</div> Takim oto sposobem mamy dodane oba przyciski, dzięki którym możemy sterować naszym shouboxem – przycisk hide w widgecie HTML1 i show w kodzie źródłowym strony. Kolejny element to dodanie arkusza CSS, który będzie definiował ich wyglad i położenie. Zaczynamy od shoutboxa, później zajmiemy się przyciskami. #HTML1 {position: fixed; bottom: 0px; left: 50px; border: 1px solid #000; display: none} #show, #hide { color: #fff; background: #000;} #show { position: fixed; bottom: 0px; left: 50px;} Okej, CSS gotowy. Ostatni krok, to gwiazda tej instrukcji, czyli funkcje jQuery. Zaczynamy od umieszczenia poniższego kodu tuż nad znacznikiem /head: <script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'></script> Pod nim (ale nad /head) wklejamy: <script type='text/javascript'> $(function(){$('#show').click(function(){$('#shoutbox').slideDown(1000);});}); $(function(){$('#hide').click(function(){$('#shoutbox').slideUp(1000);});}); </script> slideDown odpowiada u nas za rozwinięcie shoutboxa, przyporządkowany został mu więc przycisk show; slideUp natomiast ma funkcję odwrotną - zwija naszego shoutboxa, a więc przypisujemy mu przycisk hide. Liczba podana w nawiasie (w moim przypadku 1000), to liczba milisekund, które funkcja poświęci na wykonanie pożądanego efektu.

Co się tyczy slideToggle - działa on identycznie, jak slideDown i slideUp, ale co ciekawe, może je zastąpić - po kliknięci na element, który wywołuje funkcję slideToggle, możemy go zarówno zwinąć, jak i rozwinąć - w zależności od tego w której pozycji się znajduje. Moglibśmy więc zamiast powyższego skryptu, wkleić poniższy i wszystko działałoby identycznie: <script type='text/javascript'> $(function(){$('#show').click(function(){$('#shoutbox').slideToggle(1000);});}); $(function(){$('#hide').click(function(){$('#shoutbox').slideTogle(1000);});}); </script> Teraz wystarczy podmienić nasze XXX na kod shoutboxa i... cieszyć się wysuwanym dodatkiem na stronie.
pokaż shoutbox
ukryj shoutbox