Kịch bản là như thế này: Bạn có một cô vợ, và 4 cô bồ, vậy để làm sao để cô vợ và những cô bồ của xuất hiện mà không thấy mặt nhau???
+ Khi vợ có mặt, ta tìm đường cho các bồ di tản.
+ Khi vợ có không có mặt, ta lại đi chơi với bồ 1, các em khác ta cho di tản cùng vợ :)), cứ thế ta đi chơi với bồ 2 rồi bồ 3, bồ 4, sau đó ta lại về với vợ, cuộc sống vẫn tiếp diễn vòng quay lại tiếp tục.
html:
<ul id="sapxeplich">
<li>Vợ 1</li>
<li>Bồ 1</li>
<li>Bồ 2</li>
<li>Bồ 3</li>
<li>Bồ 4</li>
</ul>
Jquery
$('ul#sapxeplich li').hide();
$('ul#sapxeplich li:first').show();
$('ul#sapxeplich').each(function() { //ở đây dùng $(document).ready(function() { có lẽ hợp lý hơn
var gaptruoc= 0;
var thoigiandulich = 3000;
function gaproichodidulich(){
gaptruoc= $('ul#sapxeplich li:first').html();
$('ul#sapxeplich li:first')
.animate({opacity: 0},200).remove();
sapxeplichgapsau(gaptruoc);
}
function sapxeplichgapsau( gaptruoc){
$('ul#sapxeplich li').hide();
sapxepgapsau = ''+ gaptruoc+'';
$('ul#sapxeplich').append("<li>"+sapxepgapsau+"</li>");
$('ul#sapxeplich li:last')
.animate({opacity: 1},200);
}
interval = setInterval(gaproichodidulich, thoigiandulich);
});
Kết luận:
Nói chung là gà gà rứa thôi nhỉ :),
Tóm gà, trong cái ví dụ này cần xem lại các hàm sau:
1. hide()
2. show()
3. html()
4. append()
5. animate()
6. setInterval()
cách dùng: first selector, last selector



0 nhận xét:
Đăng nhận xét