 JQery - kolejkowanie animacji .query .dequery |
  |
| JQery - kolejkowanie animacji .query .dequery |
Post
#1
|
|
|
Grupa: Zarejestrowani Postów: 10 Pomógł: 0 Dołączył: 9.04.2013 Ostrzeżenie: (0%) 
 |
Witam,
Oto przykład z książki który znajduje się na ftp://ftp.helion.pl/przyklady/jqtwan.zip (znajduje się on w katalogu kody/r01/baner_rectangle_180_x_150) Kod <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <meta name="Author" content="dr Wojciech Majkowski" /> <title>Baner - Rectangle 180 x 150 pikseli</title> <style> body { margin:0px; padding:0px; border:0px; } img { margin:0px; padding:0px; border:0px; } div#kontener { width:180px; height:150px; overflow:hidden; margin-top:100px; margin-bottom:0px; margin-right:auto; margin-left:auto; padding:0px; border:1px solid #c0c0c0; } div#logo { position:relative; top:0px; left:0px; width:180px; height:150px; } div#haslo { position:relative; top:0px; left:0px; width:180px; height:150px; } div#tekst { position:relative; top:0px; left:0px; width:180px; height:150px; } </style> <script type="text/javascript" src="jquery_1.7.1/jquery-1.7.1.min.js"></script> </head> <body> <script> $(document).ready(function() { animacja_jeden(); }); function animacja_jeden() { $("#logo").fadeOut().queue(function(){ $("#logo").css('backgroundColor', '#fff000'); $("#logo").dequeue(); $("#logo").fadeIn("slow", function() {animacja_dwa();}); }); }; function animacja_dwa() { $("#logo").fadeOut(); $("#haslo").fadeOut().queue(function(){ $("#haslo").css('backgroundColor', '#00FF00'); $("#haslo").dequeue(); $("#haslo").fadeIn("slow", function() {animacja_trzy();}); }); }; function animacja_trzy() { $("#haslo").fadeOut(); $("#tekst").fadeOut().queue(function(){ $("#tekst").css('backgroundColor', '#ff0000'); $("#tekst").dequeue(); $("#tekst").fadeIn("slow", function() {animacja_jeden();}); }); }; </script> <div id="kontener"> <div id="logo"> <a href="http://jquery.com/" target="blank"><img src="img/logo.png" alt="Logo"/></a> </div> <div id="haslo"> <a href="http://jquery.com/" target="blank"><img src="img/haslo.png" alt="Hasło"/></a> </div> <div id="tekst"> <a href="http://jquery.com/" target="blank"><img src="img/tekst.png" alt="Tekst"/></a> </div> </div> </body> </html> Jak spojrzymy na skrypt to widzimy funkcje .queue i .dequeue - niestety niewiem jak działają owe metody; niewiem jakie są kolejne kroki, niewiem co robi .dequeue  byłbym bardzo wdzięczny jakby ktoś mi to krok po kroku wytłumaczył.I inny przykład: Kod <!DOCTYPE html> <html> <head> <style> div { background: red; width: 100px; height: 100px; position: relative; } .b { background: blue; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div class="a"></div> <div class="b"></div> <script> $('.a').animate({ left: 300 }, 3000).queue(function (next) { $('.a').fadeOut(3000); next(); }).fadeIn(3000); </script> </body> </html> I tu też mam problem - bo animacja wykonuje się tak: na początku .animate potem .fadeout i wskakuje na końcu niebieski kwadrat. Nie powinna animacja wykonywać sie w takiej kolejności: na początku .animate potem .fadeIn i na końcu dodana do kolejki przez .queue .fadeOut? Za pomoc z góry dziękuje, pozdrawiam, |
 |
 
|
|
Post
#2
|
|
|
Grupa: Zarejestrowani Postów: 280 Pomógł: 20 Dołączył: 12.12.2007 Skąd: 127.0.0.1 Ostrzeżenie: (0%)
|
http://api.jquery.com/queue/
http://api.jquery.com/dequeue/ Cytując manual, jeżeli zrobisz coś takiego Kod $('#foo').slideUp().fadeIn(); To oba efekty wykonają się równocześnie, aby wykonały się po sobie użyj Kod $('#foo').slideUp();
$('#foo').queue(function() { alert('Animation complete.'); $(this).dequeue(); }); -------------------- |
|
|
|
|
|
Aktualny czas: 21.08.2025 - 03:13 |
