Cześć,
Niestety w programowaniu webowym JavaScript jest moją słabą stroną, ale liczę że pomożecie, bo widziałem po wiadomościach, że jest tu kilka osób obeznanych z tym językiem. Od kilkunastu miesięcy posiadam tę książkę: http://helion.pl/ksiazki/jquery-tworzenie-animowanych-witryn-internetowych-wojciech-majkowski,jqtwan.htm i próbuję sobie przyswoić bibliotekę jQuery. Przykładowo na początku jest opisana anatomia metody effect():
jQuery(selektor).effect(effect, [options], [speed], [callback]);
i odnośnik do dokumentacji: http://docs.jquery.com/UI/Effects/effect (zauważcie, że zostajemy przekierowani na inną stronę biblioteki). Jednym z typów animacji jest Blind, a pozostałe parametry są opcjonalne. Napisałem więc elementarny kod:
$("#button").click(function() {
$("#content").effect("Blind");
});
i to po prostu nie działa. Wpisałem więc w wyszukiwarkę: jQuery blind effect i wyskoczyła mi metoda .toggle(), która robi właśnie to, o co mi chodziło. Mimo to, takie rozwiązanie mi się nie podoba, ponieważ chciałbym stworzyć złożoną animację, która nie działa ani z metodą .effect(), ani z metodą .toggle(). Teraz opiszę tę animację.
Istnieje div #content, który po załadowaniu jest ukryty. Po kliknięciu na div #button kontener #content rozsuwa się wertykalnie z określonym czasem. #content ma ustalony wymiar (kwadrat o boku 650 px) i zawiera w sobie kolejny div #img o tym samym rozmiarze, który także jest początkowo ukryty. Div #img zawiera background-image, który po zakończeniu rozsuwania się #content powinna rozpocząć się animacja typu explode diva #img. OK, teraz mój kod, który nie działa:
HTML i CSS:
<div id = "content" style = "width: 650px; height: 650px;" >
<div id = "img" style = "background-image: url('img.png'); width: 650px; height: 650px;" ></div>
</div>
jQuery:
$(document).ready(function() {
$("#content").hide();
$("#img").hide();
$("#button").click(function() {
$("#content").effect("Blind", linear, 1000, function {
$("#img").effect("Explode");
});
});
});
Postępuję zgodnie z dokumentacją, a po kliknięciu #button div #content się nie rozwija. Mam w zasadzie dwa pytania:
- Dlaczego to co jest napisane w książce nie działa, czyżby tak szybko się przedawniło?
- Jak zrobić poprawnie animację, którą opisałem?