Làm việc với một tập hợp các phần tử đơn lẻ
Khi bạn muốn áp dụng nhiều hiệu ứng cho cùng một tập hợp các phần tử, queuing dễ dàng được tạo ra bằng cách kết nối các hiệu ứng lại. Để minh hoạ cho việc này, chúng ta lại sẽ di chuyển hộp Cỡ Chữ sang bên tay phải và tăng chiều cao và đường biên của nó. Tuy nhiên lần này chúng ta sẽ cho 3 hiệu ứng đó xảy ra lần lượt theo thứ tự. Chúng ta chỉ cần đặt mỗi hiệu ứng trong một phương thức .animate() và sau đó thì kết nối chúng lại với nhau
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.animate({left: paraWidth - switcherWidth},
'slow')
.animate({height: '+=20px'}, 'slow')
.animate({borderWidth: '5px'}, 'slow');
});
});
Tất nhiên khi kết nối các phương thức lại, chúng ta có thể để cả ba phương thức .animate() trên cùng một dòng, nhưng vì như thế nó hơi khó đọc do vậy chúng ta để mỗi phương thức trên một dòng cho nó dễ đọc hơn.
Chúng ta có thể xếp hàng bất cứ phương thức jQuery nào bằng cách kết nối chúng với nhau. Ví dụ chúng ta cũng có thể kết nối các hiệu ứng cho thể <div id=’switcher’> với thứ tự sau:
1.Làm giảm độ trong suốt của nó xuống .5 với .fadeTo().
2.Di chuyển nó sang tay phải vơi .animte().
3.Tăng lại độ trong suốt thành 1 với .fadeTo().
4.Ẩn nó đi với .slideUp().
5.Cho hiện lại nó với .slideDown().
Tất cả những gì chúng ta phải làm là kết nối những hiệu ứng trên với thứ tự tương tự trong đoạn mã của chúng ta.
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');
});
});
Nhưng nếu bây giờ chúng ta muốn di chuyển thẻ <div> sang bên tay phải và cùng một lúc làm giảm độ trong suốt của nó đi một nửa thì sao? Nếu hai hiệu ứng này cùng xảy ra với cùng một tốc độ, thì chúng ta đơn giản chỉ cần kết hợp nó vào một phương thức .animate() là đủ. Nhưng trong ví dụ này, phương thức fade sử dụng tốc độ là ‘fast’ trong khi đó di chuyển sang phải lại sử dụng tốc độ là ‘slow’. Đây chính là lúc chúng ta cần sử dụng đến dạng thứ 2 của phương thức .method().
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, {duration: 'slow', queue: false})
.fadeTo('slow',1.0)
.slideUp('slow')
.slideDown('slow');
});
});
Đối số thứ 2 ở đây là một hoạ đồ tuỳ chọn, cho ta tuỳ biến queue. Nếu queue có giá trị là false sẽ làm cho hiệu ứng động xảy ra cùng một lúc với cái trước nó.
Điều cuối bạn cần biết về dãy hiệu ứng trên một tập hợp các phần tử đơn là queuing không tự động gắn lên những phương thức phi hiệu ứng khác như .css(). Ví dụ chúng ta muốn thay đổi màu nền của thẻ <div id=’switcher’> thành đỏ sau khi .slideUp() nhưng trước .slideDown(). Chúng ta có thể làm như sau:
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.css('backgroundColor','#f00')
.slideDown('slow');
});
});
Tuy đoạn mã để thay đổi màu nền được đặt đúng thứ tự trong mã, nhưng nó lại thay đổi màu nền ngay khi bạn nhấp chuột.
Xem Demo Online – Example 7
Có một cách mà bạn có thể thêm phương thức phi hiệu ứng vào dãy là bằng cách sử dụng phương thức .queue(). Đây sẽ là đoạn mã mà bạn có được.
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('fast',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.queue(function() {
$switcher
.css('backgroundColor', '#f00')
.dequeue();
})
.slideDown('slow');
});
});
Xem Demo Online – Example 8
Ở đoạn mã trên, khi bạn cho phương thức .queue() một hàm hồi truy, nó sẽ thêm hàm đó vào dãy hiệu ứng của phần tử phù hợp. Ở trong hàm này, chúng ta đặt cho màu nền là màu đỏ và sau đó thì thêm vào phương thức hệ quả .dequeue(). Khi có sự xuất hiện của .dequeue(), nó cho phép dãy hiệu ứng tiếp tục nơi mà nó bị dừng lại và hoàn thành cả chuỗi hiệu ứng với dòng .slideDown(). Nếu chúng ta không sử dụng .dequeue(), thì hiệu ứng động đã dừng lại rồi.
Chúng ta sẽ tìm hiểu thêm một cách khác để xếp hàng những phương thức phi hiệu ứng. Trong phần tới chúng ta sẽ tìm hiểu hiệu ứng với đa hợp phần tử.
#Làm việc với đa hợp phần tử
Không giống như khi làm việc với nhóm phần tử đơn, khi chúng ta sử dụng hiệu ứng cho các nhóm khác nhau, chúng gần như xảy ra cùng một lúc. Để thấy những hiệu ứng xảy ra cùng một lúc diễn ra như thế nào, chúng ta sẽ di chuyển một đoạn văn xuống dưới đồng thời kéo đoạn văn khác lên. Đầu tiên chúng ta sẽ thêm vào hai thẻ <p> nữa.
<div id="wrapper">
<div id="switcher">
<div class="label">Cỡ chữ</div>
<button id="switcher-default">Mặc Định</button>
<button id="switcher-large">Lớn</button>
<button id="switcher-small">Nhỏ</button>
</div><!--End #switcher-->
<div class="speech">
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est.
</p>
<a href="#" class="more">Read More</a>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est.
</p>
<p>
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget,
tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Aenean ultricies mi vitae est.
</p>
</div>
</div>
Tiếp theo để cho dễ quan sát, chúng ta sẽ cho đoạn văn thứ 3 một đường viền 1 px và đoạn văn thứ 4 có màu nền xám. Chúng ta cũng sẽ ẩn đoạn văn thứ 4 khi DOM sãn sàng.
$(document).ready(function() {
$('p:eq(2)').css('border', '1px solid #333');
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});
Cuối cùng chúng ta thêm phương thức .click() vào đoạn văn thứ 3 để khi nhấp chuột vào, thì đoạn văn thứ 3 sẽ chạy lên và ra khỏi tầm nhìn, trong khi đó đoạn văn thứ 4 sẽ chạy xuống và vào tầm nhìn.
$(document).ready(function() {
$('p:eq(2)')
.css('border', '1px solid #333')
.click(function() {
$(this).slideUp('slow')
.next().slideDown('slow');
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});
Kết quả bạn đã thấy hai hiệu ứng xảy ra gần như cùng một lúc. Đoạn văn thứ 3 chạy lên trên đồng thời đoạn văn thứ 4 đang bị ẩn cũng lò rò chạy lên trên.
#Hàm hồi truy
Để có thể xếp hàng các hiệu ứng trên những phần tử khác nhau, jQuery cung cấp một hàm hồi truy cho mỗi phương thức hiệu ứng. Như chúng ta đã thấy với các bộ xử lý sự kiện và phương thức .queue(), hàm hồi truy chỉ đơn giản là đối số của một phương thức. Trong trường hợp hiệu ứng, chúng xuất hiện là đối số cuối cùng của phương thức.
Nếu chúng ta sử dụng hàm hồi truy để xếp hàng hai hiệu ứng trượt, chúng ta có thể cho đoạn văn thứ 4 trượt xuống trước khi đoạn văn thư 3 trượt lên. Ở ví dụ dưới đây chúng ta sẽ xem xét cách thiết lập phương thức .slideDown() với hàm hồi truy.
$(document).ready(function() {
$('p:eq(2)')
.css('border', '1px solid #333')
.click(function() {
$(this).next().slideDown('slow',function() {
// đoạn mã này sẽ chạy sau khi đoan văn thứ 3 dừng lại
});
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});
Tuy nhiên chúng ta cũng cần phải thận trọng ở đây và phải biết chắc cái gì sẽ thực sự trượt lên. Ngữ cảnh cũng đã thay đổi với từ khoá $(this) bởi vì hàm hồi truy đang nằm trong phương thức .slideDown(). Khi $(this) được đặt trong hàm hồi truy thì nó không còn chỉ đoạn văn thứ 3 nữa như khi nó còn ở ngoài với phương thức .click(). Bởi vì phương thức .slideDown() được gán cho
$(this).next(), tất cả những gì nằm trong phương thức này sẽ nhìn nhận $(this) là anh em họ của nó hoặc nói khác đi chính là đoạn văn thứ 4. Cho nên nếu chúng ta thêm $(this).slideUp(‘slow’) vào trong hàm hồi truy, chúng ta sẽ kết thúc với việc cho ẩn đi đoạn văn mà chúng ta vừa cho hiện lên.
Một cách đơn giản để giữ $(this) không bị thay đổi là lưu nó ngay vào một biến trong phương thức .click() như sau: var $thirdPara = $(this). Bây giờ biến $thirdPara chính là đoạn văn thứ 3, ở cả trong và ngoài hàm hồi truy. Đây là đoạn mã sử dụng biến vừa tạo của chúng ta.
$(document).ready(function() {
var $thirdPara = $('p:eq(2)');
$thirdPara
.css('border', '1px solid #333')
.click(function() {
$(this).next().slideDown('slow',function() {
$thirdPara.slideUp('slow');
});
});
$('p:eq(3)').css('backgroundColor', '#ccc').hide();
});
Sử dụng biến $thirdPara ở trong hàm hồi truy .slideDown() phụ thuộc vào thuộc tính của Closures. Chúng ta sẽ bàn thêm về thuộc tính rất quan trọng nhưng hơi khó hiểu này trong phần sau.
Khi bạn cho chạy đoạn mã trên bạn sẽ thấy cả hai đoạn văn đều xuất hiện, khi đoạn văn thứ 4 đã trượt xuống hết thì đoạn văn thứ 3 mới bắt đầu trượt lên.
Bây giờ bạn đã hiểu được hàm hồi truy, chúng ta có thể trở lại đoạn mã ở trên trong chương này. Đoạn mà chúng ta xếp hàng cho hiệu ứng đổi màu nền ở gần cuối của dãy hiệu ứng. Thay vì chúng ta sử dụng phương thức .queue() như trước đây, chúng ta có thể sử dụng hàm hồi truy để thay thế.
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher
.fadeTo('slow',0.5)
.animate({
'left': paraWidth - switcherWidth
}, 'slow')
.fadeTo('slow',1.0)
.slideUp('slow', function() {
$switcher
.css('backgroundColor', '#f00');
})
.slideDown('slow');
});
});
Khi cho chạy đoạn mã bạn sẽ thấy màu nền của thẻ <div id=’switcher’> đổi thành màu đỏ sau khi nó đã trượt lên và trước khi nó trượt xuống.
#Tóm lược
Bằng cách sử dụng những phương thức hiệu ứng chúng ta vừa học ở chương này, chúng ta có thể tăng hoặc giảm dần cỡ chữ bằng cách sử dụng .css() hoặc .animate(). Chúng ta cũng có thể áp dụng nhiều hiệu ứng để ẩn hoặc hiện một phần tử bất kỳ bằng nhiều cách và tạo hiệu ứng động cho nó xảy ra cùng một lúc hoặc theo thứ tự.
Ở 4 chương đầu này, tất cả những ví dụ của chúng ta đều là dạng sửa đổi những phần tử đã được viết mã HTML trước. Trong chương 5, chúng ta sẽ học cách sử dụng jQuery để tạo ra các phần tử mới và thêm chúng vào cây DOM bất cứ khi nào ta muốn.
Download định dạng .pdf
Bạn có thể download định dạng .pdf của chương này về đọc offline
