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>
<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>
<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,