Jquery 5 - Chương 5 – Hiệu ứng (Effects)
Chương 5 – Hiệu ứng (Effects)
Các hiệu ứng động của jQuery sẽ làm cho trang web của bạn thêm phần sinh động. Jquery
cho phép bạn ẩn hiện, trượt lên trượt xuống các thành phần của trang web. Bạn cũng có thể
cho nó xảy ra cùng một lúc hoặc theo thứ tự định trước. Trong phần này chúng ta sẽ tìm hiểu
các hiệu ứng jQuery và kết hợp chúng để tạo ra những hiệu ứng hay.
Thay đổi Inline CSS
Trước khi chúng ta học những hiệu ứng jQuery, chúng ta cần xem lại một chút về CSS.
Trong những chương trước đây chúng ta thay đổi giao diện của các thành phần trên trang
bằng cách khai báo thuộc tính của class trong một stylesheet riêng biệt. Sau đó chúng ta thêm
hoạc loại bỏ những class đó bằng jQuery. Về cơ bản thì cách này nên được sử dụng để thêm
CSS vào HTML bởi vì nó tôn trọng quy luật tách riêng phần trình bày và cấu trúc. Tuy nhiên,
đôi khi chúng ta muốn áp dụng style cho những thành phần chưa được, hoặc khó mà được,
định dạng bằng stylesheet. Nhưng rất may mắn là jQuery có phương thức .css() để sử dụng
cho những trường hợp này.
Phương thức này hoạt động bằng cả hai cách lấy và đăt. Để lấy giá trị của một thuộc tính,
chúng ta chỉ cần chuyển tên của thuộc tính đó thành một một chuỗi, dạng như
.css(‘backgroundColor’). Jquery có thể hiểu được những thuộc tính kết hợp bởi nhiều từ và
nối với nhau bằng dấu – như là trong CSS (‘background-color’), hoặc dạng viết hoa chữ cái
đầu như là (‘backgroundColor’). Để định dạng thuộc tính style, phương thức .css() có hai
cách sử dụng. Cách thứ nhất chỉ nhận một cặp thuộc tính – giá trị. Cách thứ hai là nhận một
tập hợp các cặp thuộc tính – giá trị.
.css('property','value')
.css({property1: 'value1', 'property-2': 'value2'})
Những người đã quen với JavaScript sẽ nhận ra đây là dạng đối tượng trực kiện JavaScript.
Chú ý: Các giá trị số không dùng dấu ngoặc kép trong khi giá trị chuỗi phải có dấu ngoặc
kép. Tuy nhiên, khi sử dụng bản đồ ký hiệu, dấu ngoặc kép không bắt buộc cho những tên
thuộc tính được viết dưới dạng in hoa chữ cái đầu.
Chúng ta sử dụng phương thức .css() cũng giống như cách chúng ta đã sử dụng .addClass().
Bằng cách gán nó cho một Selector sau đó thì Bind nó vào một sự kiện. Để minh hoạ, chúng
ta sẽ sử dụng bộ nút thay đổi định dạng trong chương 3, nhưng với mã HTML khác.
<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>
</div><!--End .speech-->
Với một chút định dạng CSS cơ bản chúng ta có được hình dưới đây.
Xem Demo online – Example 1
Khác với bộ nút ở chương trước, trong chương này chúng ta sẽ sử dụng phần tử <button>.
Khi người dùng nhấp chuột vào nút Lớn hoặc Nhỏ sẽ tăng hoặc giảm cỡ chữ trong thẻ <div
class=’speech’>. Cuối cùng họ cũng có thể nhấn vào nút Mặc Định để trả cỡ chữ về giá trị
ban đầu.
Nếu chúng ta chỉ muốn tăng cỡ chữ một lần với một giá trị đặt trước thì chúng ta vẫn có thể
sử dụng phương thức .addClass(). Nhưng lần này chúng ta sẽ cho phép người dùng nhấp
chuột nhiều lần vào nút, và mỗi lần nhấp cỡ chữ sẽ tăng hoặc giảm dần lên. Tất nhiên bạn
cũng có thể tạo ra nhiều class và gán chúng cho mỗi lần nhấp chuột và sau đó chúng ta cho
chạy vòng lặp qua từng class. Nhưng làm như thế nó thủ công quá và rất mất thời gian, cho
nên cách lẹ hơn sẽ là lấy cỡ chữ của đoạn văn đó trước, sau đó thì tăng nó lên với giá trị mình
muốn. Trong ví dụ này chúng ta sẽ cho tăng cỡ chữ lên 40% mỗi khi người dùng nhấp chuột.
Đoạn mã của chúng ta sẽ bắt đầu bằng $(document).ready() và bộ xử lý sự kiện $(‘#switcher-
large’).click()
$(document).ready(function() {
$('#switcher-large').click(function() {
});
});
Để biết được cỡ chữ của đoạn văn đó là bao nhiêu rất đơn giản, jQuery có phương thức .css()
cho phép bạn làm việc này. Tuy nhiên phương thức này lại trả về giá trị có thêm cái đuôi
‘px’, ví dụ là đoạn văn có kích thước chữ là 16px thì giá trị trả về sẽ là 16px. Cho nên chúng
ta phải tìm cách cắt cái đuôi ‘px’ đó đi và chỉ giữ lại phần giá trị số là 16. Một điểm nữa là
khi chúng ta định sử dụng một đối tượng jQuery nhiều lần, bạn nên nhớ lại selector bằng cách
lưu đối tượng đó vào một biến.
$(document).ready(function() {
var $speech = $('div.speech'); //lưu đối tượng jQuery vào biến $speech
$('#switcher-large').click(function() {
var num = parseFloat($speech.css('fontSize'), 10);
});
});
Ở dòng code thứ 2 chúng ta đã tạo ra một biến là $speech và lưu đối tượng jQuery vào đó.
Bạn cũng nên lưu ý cách tôi đặt tên biến bắt đầu bằng dấu $, bởi vì trong javaScript bạn hoàn
toàn có thể sử dụng dấu $ để đặt tên cho biến. Cho nên đây là cách để nhắc nhở chúng ta về
sau là biến này đang chứa một đối tượng jQuery.
Trông bộ xử lý .click(), chúng ta sử dụng hàm parseFloat() để cắt đi phần đuôi ‘px’ và chỉ giữ
lại phần giá trị số. Hàm parseFloat() sẽ kiểm tra một chuối theo thứ tự từ trái qua cho đến khi
nó gặp một ký tự không phải là dạng số. Chuỗi số sẽ được biến thành dạng số thập phân.
Trong ví dụ này nó sẽ biến chuỗi ’16′ thành dạng số 16 (quá giỏi >:<) và tất nhiên nó cũng sẽ
cắt phần đuôi 'px' đi bởi vì nó không phải là số. Còn trong trường hợp chuỗi đó bắt đầu bằng
chữ thay vì là số, hàm .parseFloat() sẽ trả về một giá trị là NaN, là chữ viết tắt của Not A
Number (không phải số). Hàm parseFloat() có argument thứ hai để đảm bảo rằng giá trị số
trả về dưới dạng hàng chục chứ không phải các dạng khác.
Cuối cùng chúng ta chỉ cần nhân biến num với 1.4 (tăng 40%) và sau đó đặt kích cỡ chữ bằng
cách kết hợp num với ‘px’
$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher-large').click(function() {
var num = parseFloat($speech.css('fontSize'), 10 );
num *= 1.4;
$speech.css('fontSize', num + 'px');
});
});
Lưu ý: Phương trình num *= 1.4 là dạng viết tắt phổ biến. Nó tương đương với num = num
* 1.4. Nếu bạn thấy cách viết thường dễ hiểu hơn thì bạn cũng có thể sử dụng. Còn nếu
không bạn cũng có thể dùng cách viết trên cho các phương trình khác như tính cộng num +=
1.4, tính trừ num -= 1.4, tính chia num /= 1.4 và chia với số dư num %= 1.4.
Xem Demo online – Example 2
Bây giờ để nút Nhỏ Hơn có thể hoạt động, chúng ta sẽ chia num /= 1.4. Hơn nữa chúng ta sẽ
kết hợp cả hai phép tính trên vào một bộ xử lý .click() cho tất cả các phần tử <button> nằm
trong thẻ <div id=’switcher’>. Sau khi đã tìm ra được giá trị số, và dựa vào ID của nút nào
được nhấn, chúng ta sẽ sử dụng phép nhân hoặc chia. Dưới đây là đoạn mã để làm việc này.
$(document).ready(function() {
var $speech = $('div.speech');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
if (this.id == 'switcher-large') {
num *= 1.4;
} else if (this.id == 'switcher-small') {
num /= 1.4;
}
$speech.css('fontSize', num + 'px);
});
});
Nhớ lại ở chương 3 chúng ta có thể lấy thuộc tính id của một phần tử DOM bằng cách sử
dụng từ khoá this, trong trường hợp này nó xuất hiện trong mệnh đề if … else. Làm như vậy
thì nó hiệu quả hơn là phải tạo ra một đối tượng jQuery chỉ để kiểm tra giá trị của một thuộc
tính.
Tiếp theo chúng ta cũng phải làm cho nút Mặc Định hoạt động để người dùng có thể trả về
giá trị mặc định lúc ban đầu. Việc chúng ta cần làm là lưu kích thước font chữ của đoạn văn
vào một biến ngay khi DOM sẵn sàng. Sau đó chúng ta có thể gọi lại giá trị này mỗi khi nút
Mặc Định được nhấp. Chúng ta cũng có thể sử dụng thêm một mệnh đề else … if nữa, nhưng
có lẽ mệnh đề Switch trong trường hợp này là hợp lý hơn.
$(document).ready(function() {
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.css('fontSize', num + 'px');
});
});
Ở đoạn code trên chúng ta vẫn kiểm tra giá trị của this.id và thay đổi kích thước chữ dựa vào
nó, nhưng nếu giá trị của nó không phải là ‘switcher-large’ hoặc ‘switcher-small’ thì nó sẽ
mặc định là kích cỡ ban đầu.
Xem Demo online – Example 3
Ẩn hiện cơ bản
Hai phương thức .hide() và .show(), khi không có tham số, có thể được coi là phương thức rút
gọn của .css(‘display’,'string’), ở đó ‘string’ là một giá trị bất kỳ. Hiệu ứng đạt được của hai
phương thức này thì cũng đơn giản như tên gọi, có nghĩa là nó sẽ ẩn hoặc hiện một thành
phần nào đó.
Phương thức .hide() sẽ làm cho thuộc tính inline style cho các phần tử phù hợp trở thành
display:none. Nhưng cái hay của phương thức này là ở chỗ nó ghi nhớ giá trị thuộc tính của
display (thường là inline hoặc block) trước khi nó bị đổi thành none. Ngược lại, phương thức
.show() lại trả về giá trị thuộc tính display ban đầu trước khi nó bị biến thành display:none.
Tính năng này của .show() và .hide() đặc biệt có ích khi bạn muốn ẩn một thành phần nào đó
có thuộc tính display mặc định đã được khai báo trong stylesheet. Ví dụ, phần tử <li> có giá
trị display mặc định là display:block, nhưng chúng ta lại muốn biến nó thành display:inline
để sử dụng trong menu nằm ngang. May cho chúng ta là khi sử dụng phương thức .show()
cho một thành phần bị ẩn như ở ví dụ này là những thẻ <li>. Nó sẽ không trả lại giá trị mặc
định là display:block, bởi vì nếu như thế thì mỗi thẻ <li> lại xuất hiện trên một hàng thì hỏng
hết. Thay vào đó, các phần tử sẽ được trả lại trạng thái trước là display:inline, như thế thì
menu nằm ngang mới có thể hoạt động được.
Để minh hoạ cho tính năng trên, chúng ta sẽ thêm một đoạn văn bản thứ hai và một thẻ link
“read more” vào sau đoạn văn thứ nhất.
<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>
Khi DOM sẵn sàng thì đoạn văn thứ hai bị ẩn đi
$(document).ready(function() {
$('p:eq(1)').hide();
});
Xem Demo online – Example 4
Khi đường link Read More được click thì đoạn văn thứ 2 sẽ xuất hiện và chữ Read More sẽ bị
ẩn đi
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() { //Khi thẻ <a class='more'> được
click
$('p:eq(1)').show(); //cho hiển thị đoạn văn thứ 2
$(this).hide(); //this ở đây là chỉ đối tượng jQuery a.more ẩn
đi
return false; // ngăn không cho đường link hoạt động như mặc
định
});
});
Dòng mã mà bạn cần lưu ý ở trên là đoạn return false. Bởi vì mặc định của đường liên kết
mỗi khi được nhấp là sẽ liên kết đến trang khác hoặc phần nào đó. Nhưng khi ta thêm dòng
return false, nó sẽ giúp ngăn chặn mặc định của đường liên kết.
Hai phương thức .show() và .hide() ở trên tuy ngắn gọn và dễ sử dụng nhưng nó lại không
được “mướt” cho lắm, cho nên ở phần tiếp theo chúng ta sẽ làm cho nó mướt hơn.
Hiệu ứng và tốc độ
Khi ta thêm tốc độ, hay nói chính xác hơn là khoảng thời gian, vào phương thức .show() hoặc
.hide(), nó sẽ trở thành hiệu ứng động xảy ra trong một khoảng thời gian định trước. Ví dụ
như phương thức .hide() làm giảm chiều cao, độ rộng và tính trong suốt của một phần tử cùng
một lúc cho đến khi cả ba giá trị đều bằng không. Đến lúc đó thuộc tính của CSS là display:
none sẽ được áp dụng. Mặt khác, phương thức .show() thì tăng chiều cao của một phần tử từ
trên xuống dưới, chiều rộng từ trái qua phải và độ trong suốt từ 0 đến 1 cho đến khi phần tử
đó hoàn toàn có thể được nhìn thấy.
Tốc độ
Với hiệu ứng jQuery, chúng ta có thể sử dụng ba tốc độ có sẵn là: ‘slow’, ‘normal’ và ‘fast’.
Sử dụng .show(‘slow’) sẽ làm cho hiệu ứng Show diễn ra trong 0.6 giây, .show(‘normal’)
trong vòng 0.4 giây và .show(‘fast’) là 0.2 giây. Nếu bạn muốn chính xác hơn nữa, bạn có thể
sử dụng millisecond như: .show(850). Không giống như dạng chữ, khi dùng millisecond, số
không cần phải bỏ trong dấu nháy.
Quay lại ví dụ ở trên, bây giờ chúng ta sẽ thêm tốc độ vào xem nó như thế nào.
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').show('slow');
$(this).hide();
return false;
});
});
Xem Demo online – Example 5
Fade in và Fade out
Hai phương thức .show() và .hide() cũng đã đủ ‘độ mướt’ rồi, nhưng có đôi khi bạn lại thấy
‘mướt’ quá cũng không tốt. Cho nên jQuery cho chúng ta một số những hiệu ứng động có sẵn
khác để thêm phần linh hoạt. Ví dụ khi bạn muốn cả đoạn văn xuất hiện từ từ bằng cách tăng
dần độ trong suốt của nó, chúng ta có thể sử dụng .fadeIn(‘slow’):
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').fadeIn('slow');
$(this).hide();
return false;
});
});
Nếu muốn bạn cũng có thể thử với .fadeOut(‘slow’) xem công dụng của nó như thế nào.
Hiệu ứng đa hợp
Đôi khi chúng ta muốn đảo trạng thái ẩn hiện một thành phần nào đó thay vì chỉ hiển thị nó
một lần như chúng ta đã làm ở các bước trên. Đảo trạng thái có thể làm được bằng cách kiểm
tra độ nhìn thấy của một tập hợp các thành phần trước, sau đó thì gán một phương thức phù
hợp cho nó. Sử dụng lại hiệu ứng fade, chúng ta có thể sửa lại mã như sau:
$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
if ($firstPara.is(':hidden')) {
$firstPara.fadeIn('slow');
$(this).text('read less');
} else {
$firstPara.fadeOut('slow');
$(this).text('read more');
}
return false;
});
});
Như chúng ta từng làm ở trên, chúng ta lưu selector vào một biến, trong ví dụ này là
$firstPara = $(‘p:eq(1)’), để tránh phải lập lại việc lên xuống cây DOM. Chúng ta cũng không
còn ẩn đi đường liên kết mà thay đổi chữ của nó.
Sử dụng mệnh đề if … else là hoàn toàn hợp lý để đảo trạng thái ẩn hiện của một phần tử.
Nhưng với hiệu ứng đa hợp của jQuery, chúng ta không cần phải sử dụng dạng điều kiện này
nữa. Jquery có một phương thức là .toggle(), hoạt động giống như .show() và .hide(), nó cũng
có thể nhận hoặc không nhận tham số tốc độ. Một phương thức đa hợp nữa là .slideToggle(),
nó được sử dụng để ẩn hoặc hiện một phần tử bằng cách từ từ tăng hoặc giảm độ cao của nó.
Đoạn mã dưới đây chúng ta sẽ sử dụng phương thức .slideToggle().
$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
$firstPara.slideToggle('slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});
Lần này từ khoá $(this) được dùng nhiều lần, cho nên chúng ta lưu nó lại vào một biến $link
để đoạn mã hoạt động hiệu quả hơn và cũng dễ đọc hơn. Hơn nữa, mệnh đề điều kiện chỉ
kiểm tra nội dung chữ của đường liên kết thay vì xem xem đoạn văn thứ 2 có hiện hay không.
Bởi vì chúng ta chỉ sử dụng mệnh đề này để thay đổi chữ của nó.
Tự tạo hiệu ứng động
Ngoài những phương thức có sẵn, jQuery cung cấp thêm một phương thức rất mạnh nữa là
.animate(). Nó cho phép chúng ta tự tạo ra những hiệu ứng động theo ý thích của mình.
Phương thức .animate() có hai dạng. Dạng thứ nhất có thể nhận bốn đối số.
· 1.Cặp thuộc tính và giá trị – giống như .css() mà chúng ta đã thảo luận ở trên.
· 2.Tốc độ tuỳ chọn – có thể là một trong những tốc độ có sẵn hoặc một số dưới dạng
millisecond.
· 3.Kiểu di chuyển – sẽ được bàn kỹ hơn ở chương sau
· 4.Một hàm gọi ngược sẽ được bàn ở phần dưới.
Kết hợp lại thì bốn đối số trên sẽ có dạng công thức chung như sau
.animate({property1: 'value1', property2: 'value2'},
speed, easing, function() {
alert('đã tiến hành xong');
});
Dạng thứ hai lấy vào 2 đối số, thuộc tính và tuỳ chọn.
.animate({properties}, {options})
Khi chúng ta xuống dòng để dễ đọc hơn thì dạng thứ 2 nhìn như sau:
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value',
easing: 'value',
complete: function() {
alert('The animation is finished.');
},
queue: boolean,
step: callback
});
Trước hết chúng ta sẽ sử dụng dạng thứ nhất của .animate(), sau đó chúng ta sẽ sử dụng dạng
thứ 2 ở phần sau của chương này khi chúng ta bàn tới xếp hàng hiệu ứng.
Đảo trạng thái Fade
Khi chúng ta nói về hiệu ứng đa hợp, bạn có thấy rằng không phải phương thức nào cũng có
những phương thức đảo trạng thái đi kèm. Ví dụ phương thức .slide() thì có .slideToggle(),
nhưng không có .fadeToggle() cho .fadeIn() và .fadeOut(). Nhưng chúng ta có thể dễ dàng sử
dụng phương thức .animate() để tạo ra hiệu ứng đảo trạng thái fade. Ở đoạn mã dưới đây,
chúng ta sẽ thay thế phương thức .slideToggle() với hiệu ứng động tự tạo.
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').animate({opacity: 'toggle'}, 'slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});
Xem ví dụ bạn sẽ thấy, phương thức .animate() cũng cho phép sử dụng những từ khoá như
‘show’, ‘hide’ và ‘toggle’. Khi mà những phương thức rút gọn khác không phù hợp với tác
vụ.
Hiệu ứng động đa thuộc tính
Với phương thức .animate(), chúng ta có thể cùng một lúc sửa đổi bất cứ sự kết hợp nào của
các thuộc tính. Ví dụ khi bạn muốn cùng một lúc tạo ra hai hiệu ứng trượt và mờ đi khi đảo
trạng thái của đoạn văn thứ 2, chúng ta chỉ việc thêm cặp thuộc tính – giá trị chiều cao vào
bản đồ thuộc tính .animate().
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').animate({
opacity: 'toggle',
height: 'toggle'
},
'slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});
Hơn nữa, chúng ta không chỉ có những thuộc tính định dạng để sử dụng cho những phương
thức rút gọn mà chúng ta còn có những thuộc tính khác như: left, top, fontSize, margin,
padding và borderWidth. Hãy nhớ lại đoạn mã thay đổi kích thước chữ của đoạn văn ở trên.
Chúng ta có thể tăng hoặc giảm kích thước bằng cách dùng .animate() thay cho .css().
$(document).ready(function() {
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.animate({fontSize: num + 'px'},
'slow');
});
});
Những thuộc tính vừa nêu ở trên còn cho phép chúng ta tạo ra nhiều hiệu ứng phức tạp khác.
Ví dụ chúng ta có thể di chuyển một thành phần từ trái sang phải của trang web và cùng một
lúc tăng chiều cao của nó lên 20px và thay đổi độ dày của border lên thành 5px. Chúng ta sẽ
thực nghiệm với thẻ <div id=’switcher’>.
Với những giao diện co giãn, chúng ta phải tính toán được khoảng cách mà hộp div sẽ di
chuyển trước khi nó chạm vào đường biên bên phải của trang.Giả sử rằng độ rộng của đoạn
văn bản là 100%, chúng ta có thể lấy độ rộng của đoạn văn bản trừ đi độ rộng của hộp Cỡ
Chữ. Jquery có một phương thức là .width() có thể sử dụng được trong trường hợp này, tuy
nhiên nó lại không tính được padding trái phải hoặc độ rộng đường viền. Với jQuery phiên
bản 1.2.6, chúng ta có thêm phương thức .outerWidth(). Đây chính là phương thức chúng ta
sẽ sử dụng để tránh phải tính thêm vào padding và border. Trong ví dụ này chúng ta sẽ bắt
đầu hiệu ứng động khi mà người dùng nhấp chuột vào từ Cỡ Chữ, ở ngay phía trên hàng nút.
Đoạn mã sẽ tương tự như sau
$(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,
height: '+=20px', borderWidth: '5px'}, 'slow');
});
});
Bạn nên chú ý đến thuộc tính height có dấu += trước giá trị pixel. Nó có nghĩa là giá trị tương
đối. Nên thay vì nó làm cho hộp biến thành 20px, nó sẽ làm cho hộp to ra 20 px lớn hơn so
với kích thước hiện tại.
Mặc dù đoạn mã trên làm cho thẻ div cao lên và border dày lên, nhưng nó không di chuyển
sang bên tay phải như chúng ta muốn. Chúng ta phải thay đổi thuộc tính position của nó trong
CSS.
Định vị trí với CSS
Khi bạn làm việc với .animate(), bạn nên nhớ đến tầm ảnh hưởng của CSS lên các thành phần
chúng ta muốn sửa đổi. Ví dụ khi bạn điều chỉnh thuộc tính left như trên, nó sẽ không tạo ra
thay đổi gì với các phần tử đó trừ khi những phần tử bạn muốn thay đổi có thuộc tính position
là relative hoặc absolute trong CSS. Vị trí mặc định của CSS cho những thành phần Block-
level là static, có nghĩa là tĩnh, điều đó nói lên lý do tại sao nó vẫn giữ nguyên vị trí khi bạn
cố gắng di chuyển nó. Do vậy nếu bạn muốn nó được thay đổi, bạn phải sửa lại giá trị
position của nó trong CSS.
#switcher {
position: relative;
}
Sau khi đã thay đổi thuộc tính position trong CSS, hộp nút của chúng ta đã di chuyển sang
bên tay phải như hình
Xem Demo online – Example 6
Hiệu ứng đồng bộ và theo thứ tự
Phương thức .animate() như chúng ta đã biết được sử dụng để tạo ra hiệu ứng đồng bộ cho
một tập hợp các phần tử. Nhưng cũng có lúc chúng ta lại muốn các hiệu ứng xảy ra theo thứ
tự hết cái này rồi mới đến cái kia.
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().
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ử.
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.
