+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: JQery - kolejkowanie animacji .query .dequery (/thread-jqery-kolejkowanie-animacji-query-dequery)
JQery - kolejkowanie animacji .query .dequery - Witek76 - 07-06-2013
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 sad.gif 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,
RE: JQery - kolejkowanie animacji .query .dequery - Kartofelek - 07-06-2013
Ja w sumie nie korzystałem nigdy z tego bo zawsze używałem metody animate({.....}, function() {....})
ale z tego co piszą http://jqapi.com/#p=queue
to ty po prostu nadpisujesz animację. Czyli robi się jedno po drugim. Moim zdaniem powinieneś pobrać fx (masz na tamtej stronie - 2 funkcja w kodzie) i zrobić do niej push animacji którą chcesz jako następna.
RE: JQery - kolejkowanie animacji .query .dequery - Witek76 - 08-06-2013
(07-06-2013, 12:26)Kartofelek napisał(a): ale z tego co piszą http://jqapi.com/#p=queue
to ty po prostu nadpisujesz animację. Czyli robi się jedno po drugim. Moim zdaniem powinieneś pobrać fx (masz na tamtej stronie - 2 funkcja w kodzie) i zrobić do niej push animacji którą chcesz jako następna.
Hmm... nie bardzo rozumiem - jak nadpisuje? A "fx" to domyślna nazwa kolejki - div.queue("fx"); to jest to samo co div.queue(); co mam pobrać i jaki push ? Kurcze jestem początkujący - przetłumacz
I jeszcze jedno pytanie - dlaczego http://jsfiddle.net/AAk2n/ to nie to samo co to http://jsfiddle.net/34qWL/ ?
RE: JQery - kolejkowanie animacji .query .dequery - Kartofelek - 08-06-2013
Przeciez masz dobrze objasnione na stronie którą ci podałem. fx wskazuje na tablicę z aktualnymi animacjiami. Masz na tamtej stronie skrypt jak ją pobrać. Wystarczy że do niej zrobisz push z własną animacją.